<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>react从精通到转行 | 不眠</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/blog/favicon.ico">
    <meta name="description" content="生活不仅需要氧气，更需要勇气">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blog/assets/css/0.styles.a6f4041f.css" as="style"><link rel="preload" href="/blog/assets/js/app.bd1ef45e.js" as="script"><link rel="preload" href="/blog/assets/js/3.ba154db2.js" as="script"><link rel="preload" href="/blog/assets/js/1.1f0d1f23.js" as="script"><link rel="preload" href="/blog/assets/js/10.707cbfdf.js" as="script"><link rel="prefetch" href="/blog/assets/js/11.72f1afb7.js"><link rel="prefetch" href="/blog/assets/js/12.2f9bf96e.js"><link rel="prefetch" href="/blog/assets/js/13.05b7b31a.js"><link rel="prefetch" href="/blog/assets/js/14.44f18cf0.js"><link rel="prefetch" href="/blog/assets/js/15.6aafcdf2.js"><link rel="prefetch" href="/blog/assets/js/16.d4a57fd2.js"><link rel="prefetch" href="/blog/assets/js/17.067fa92a.js"><link rel="prefetch" href="/blog/assets/js/18.21af6bf6.js"><link rel="prefetch" href="/blog/assets/js/19.ad8e54ec.js"><link rel="prefetch" href="/blog/assets/js/20.50434d17.js"><link rel="prefetch" href="/blog/assets/js/21.95e1d5d1.js"><link rel="prefetch" href="/blog/assets/js/22.5bbb89a4.js"><link rel="prefetch" href="/blog/assets/js/23.49d7a9a4.js"><link rel="prefetch" href="/blog/assets/js/24.aaae9157.js"><link rel="prefetch" href="/blog/assets/js/25.889add58.js"><link rel="prefetch" href="/blog/assets/js/26.4b48b065.js"><link rel="prefetch" href="/blog/assets/js/27.b06fa976.js"><link rel="prefetch" href="/blog/assets/js/28.f78d3b25.js"><link rel="prefetch" href="/blog/assets/js/29.67ba4742.js"><link rel="prefetch" href="/blog/assets/js/30.1158f56f.js"><link rel="prefetch" href="/blog/assets/js/4.c0f4c928.js"><link rel="prefetch" href="/blog/assets/js/5.a69dfd84.js"><link rel="prefetch" href="/blog/assets/js/6.2d4b5bad.js"><link rel="prefetch" href="/blog/assets/js/7.728ad095.js"><link rel="prefetch" href="/blog/assets/js/8.17b33111.js"><link rel="prefetch" href="/blog/assets/js/9.c1e3802f.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.a6f4041f.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-999d3bb4><div data-v-999d3bb4><div id="loader-wrapper" class="loading-wrapper" data-v-2c578df8 data-v-999d3bb4 data-v-999d3bb4><div class="loader-main" data-v-2c578df8><div data-v-2c578df8></div><div data-v-2c578df8></div><div data-v-2c578df8></div><div data-v-2c578df8></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-067bd032 data-v-999d3bb4 data-v-999d3bb4><h3 class="title" data-v-067bd032 data-v-067bd032>不眠</h3> <p class="description" data-v-067bd032 data-v-067bd032>生活不仅需要氧气，更需要勇气</p> <label id="box" class="inputBox" data-v-067bd032 data-v-067bd032><input type="password" value="" data-v-067bd032> <span data-v-067bd032>Konck! Knock!</span> <button data-v-067bd032>OK</button></label> <div class="footer" data-v-067bd032 data-v-067bd032><span data-v-067bd032><i class="iconfont reco-theme" data-v-067bd032></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-067bd032>vuePress-theme-reco</a></span> <span data-v-067bd032><i class="iconfont reco-copyright" data-v-067bd032></i> <a data-v-067bd032><span data-v-067bd032>william</span>
            
          <!---->
          2022
        </a></span></div></div> <div class="hide" data-v-999d3bb4><header class="navbar" data-v-999d3bb4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/1.png" alt="不眠" class="logo"> <span class="site-name">不眠</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      目录
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/AudioAndVideo/" class="nav-link"><i class="undefined"></i>
  AudioAndVideo
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/react/" class="nav-link"><i class="undefined"></i>
  react
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/vue/" class="nav-link"><i class="undefined"></i>
  vue
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      文档
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/docs/theme-reco/" class="nav-link"><i class="undefined"></i>
  前端工程化
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      联系
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/yokeney" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-999d3bb4></div> <aside class="sidebar" data-v-999d3bb4><div class="personal-info-wrapper" data-v-e2878dae data-v-999d3bb4><img src="/blog/1.png" alt="author-avatar" class="personal-img" data-v-e2878dae> <h3 class="name" data-v-e2878dae>
    william
  </h3> <div class="num" data-v-e2878dae><div data-v-e2878dae><h3 data-v-e2878dae>19</h3> <h6 data-v-e2878dae>Articles</h6></div> <div data-v-e2878dae><h3 data-v-e2878dae>0</h3> <h6 data-v-e2878dae>Tags</h6></div></div> <ul class="social-links" data-v-e2878dae></ul> <hr data-v-e2878dae></div> <nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      目录
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/AudioAndVideo/" class="nav-link"><i class="undefined"></i>
  AudioAndVideo
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/react/" class="nav-link"><i class="undefined"></i>
  react
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/vue/" class="nav-link"><i class="undefined"></i>
  vue
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      文档
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/docs/theme-reco/" class="nav-link"><i class="undefined"></i>
  前端工程化
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      联系
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/yokeney" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-067bd032 data-v-999d3bb4><h3 class="title" data-v-067bd032 data-v-067bd032>react从精通到转行</h3> <!----> <label id="box" class="inputBox" data-v-067bd032 data-v-067bd032><input type="password" value="" data-v-067bd032> <span data-v-067bd032>Konck! Knock!</span> <button data-v-067bd032>OK</button></label> <div class="footer" data-v-067bd032 data-v-067bd032><span data-v-067bd032><i class="iconfont reco-theme" data-v-067bd032></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-067bd032>vuePress-theme-reco</a></span> <span data-v-067bd032><i class="iconfont reco-copyright" data-v-067bd032></i> <a data-v-067bd032><span data-v-067bd032>william</span>
            
          <!---->
          2022
        </a></span></div></div> <div data-v-999d3bb4><main class="page"><section><div class="page-title"><h1 class="title">react从精通到转行</h1> <div data-v-10e19382><i class="iconfont reco-account" data-v-10e19382><span data-v-10e19382>william</span></i> <i class="iconfont reco-date" data-v-10e19382><span data-v-10e19382>3/1/2022</span></i> <!----> <!----></div></div> <div class="theme-reco-content content__default"><h2 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h2> <img src="/blog/assets/img/bjqs.fe07a3b2.jpg" style="height:500px;width:100%;"> <p>react 用于动态构建用户界面的 JavaScript 库(只关注于视图)</p> <ol><li>发送请求获取数据</li> <li>处理数据（过滤，整理格式等）</li> <li><strong>操作DOM呈现页面</strong>（React做的事情）
React是一个将数据渲染为HTML视图的开源JavaScript库</li></ol> <h2 id="_1-2-原生javascript的缺点"><a href="#_1-2-原生javascript的缺点" class="header-anchor">#</a> 1.2 原生JavaScript的缺点</h2> <ol><li>原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）</li> <li>使用JavaScript直接操作DOM，浏览器会进行大量的<strong>重绘重排</strong></li> <li>原生JavaScript没有<strong>组件化</strong>编码方案，代码复用率很低</li></ol> <p>【补充】<strong>浏览器重绘重排</strong></p> <p>浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]</p> <ul><li>重绘(repaint)：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘</li> <li>重排(reflow)：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排</li></ul> <h3 id="【补充】模块化与组件化"><a href="#【补充】模块化与组件化" class="header-anchor">#</a> 【补充】模块化与组件化</h3> <h4 id="模块"><a href="#模块" class="header-anchor">#</a> 模块</h4> <p>理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率
组件
理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件： 一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率</p> <ul><li>模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用</li> <li>组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用</li></ul> <h3 id="react的特点"><a href="#react的特点" class="header-anchor">#</a> React的特点</h3> <p>采用组件化模式、声明式编码，提高开发效率及组件复用率
在 React Native中可以使用React语法进行移动端开发
使用虚拟DOM+Diff算法，尽量减少与真实DOM的交互</p> <h3 id="react高效的原因"><a href="#react高效的原因" class="header-anchor">#</a> React高效的原因</h3> <p>使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。
相关库介绍
旧版本 16.8.4 (March 5, 2019)
新版本 有不一样的会说明</p> <p>react.js：React核心库。
react-dom.js：提供操作DOM的React扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。</p> <p>【补充】babel.js的作用
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上<code>type=&quot;text/babel&quot;</code>, 声明需要babel来处理
补充】babel.js的作用
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上<code>type=&quot;text/babel&quot;</code>, 声明需要babel来处理</p> <h2 id="使用jsx创建虚拟dom"><a href="#使用jsx创建虚拟dom" class="header-anchor">#</a> 使用JSX创建虚拟DOM</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">const</span> <span class="token constant">VDOM</span> <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hello,React</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>渲染虚拟DOM(元素)</p> <ol><li>语法: ReactDOM.render(virtualDOM, containerDOM)</li> <li>作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明</li></ol> <ul><li>参数一: 纯js或jsx创建的虚拟dom对象</li> <li>参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>hello_react<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 准备好一个“容器” --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  <span class="token comment">&lt;!-- 引入react核心库 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/react.development.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 引入react-dom，用于支持react操作DOM --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/react-dom.development.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 引入babel，用于将jsx转为js --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/babel.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/babel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> <span class="token comment">/* 此处一定要写babel */</span>
		<span class="token comment">//1.创建虚拟DOM</span>
		<span class="token keyword">const</span> <span class="token constant">VDOM</span> <span class="token operator">=</span> <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>Hello<span class="token punctuation">,</span>React<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span> <span class="token comment">/* 此处一定不要写引号，因为不是字符串 */</span>
		<span class="token comment">//2.渲染虚拟DOM到页面</span>
		ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token constant">VDOM</span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
	</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bffc46e61cf04c279582774265ce9cfc~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p> <h1 id="创建虚拟dom的两种方式"><a href="#创建虚拟dom的两种方式" class="header-anchor">#</a> 创建虚拟DOM的两种方式</h1> <h2 id="_3-1-纯js方式-一般不用"><a href="#_3-1-纯js方式-一般不用" class="header-anchor">#</a> 3.1 纯JS方式(一般不用)</h2> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/react.development.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/react-dom.development.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript"> 
	<span class="token comment">//1.创建虚拟DOM</span>
	<span class="token keyword">const</span> <span class="token constant">VDOM</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token string">'title'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token string">'Hello,React'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
	<span class="token comment">//2.渲染虚拟DOM到页面</span>
	ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token constant">VDOM</span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="jsx方式"><a href="#jsx方式" class="header-anchor">#</a> JSX方式</h2> <p>JSX方式就是js创建虚拟DOM的语法糖</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/react.development.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/react-dom.development.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/babel.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/babel<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span><span class="token plain-text"> /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		&lt;h1 id=&quot;title&quot;&gt;
			&lt;span&gt;Hello,React&lt;/span&gt;
		&lt;/h1&gt;
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52c94e72181c48bda06a89644cb02e6a~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p> <h1 id="虚拟dom与真实dom"><a href="#虚拟dom与真实dom" class="header-anchor">#</a> 虚拟DOM与真实DOM</h1> <p>打印输出虚拟DOM和真实DOM进行比较</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">const</span> <span class="token constant">VDOM</span> <span class="token operator">=</span> <span class="token punctuation">(</span>  <span class="token comment">/* 此处一定不要写引号，因为不是字符串 */</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Hello,React</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span>
<span class="token comment">//2.渲染虚拟DOM到页面</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token constant">VDOM</span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token constant">TDOM</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'demo'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'虚拟DOM'</span><span class="token punctuation">,</span><span class="token constant">VDOM</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'真实DOM'</span><span class="token punctuation">,</span><span class="token constant">TDOM</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">debugger</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78505a9467724985869d80f9f047be3d~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef87a4c0e30a44b185b404adff596a22~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p> <ol><li><strong>虚拟DOM本质是Object类型的对象（一般对象）</strong></li> <li><strong>虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性</strong></li> <li><strong>虚拟DOM最终会被React转化为真实DOM，呈现在页面上</strong></li></ol> <h1 id="jsx入门"><a href="#jsx入门" class="header-anchor">#</a> JSX入门</h1> <p>概述
全称: JavaScript XML
React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖</p> <p>作用: 用来简化创建虚拟DOM</p> <p>写法：<code>var ele = &lt;h1&gt;Hello JSX!&lt;/h1&gt;</code></p> <div class="custom-block tip"><p class="title"></p><p><strong>注意1：它不是字符串, 也不是HTML/XML标签</strong></p> <p><strong>注意2：它最终产生的就是一个JS对象</strong></p></div><p>标签属性任意: HTML标签属性或其它
基本语法规则</p> <ul><li>定义虚拟DOM时，不要写引号。</li> <li>标签中混入JS表达式时要用 <code>{}</code>。</li> <li>样式的类名指定不要用 <code>class</code>，要用 <code>className</code>。（因为class是ES6中类的关键字，所以不让用）。</li> <li>内联样式，要用 <code>style={{}}</code> 的形式去写。</li> <li>只有一个根标签。</li> <li>标签必须闭合。</li> <li>标签首字母。
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方</li></ul> <p>下面这些都是表达式：</p> <ol><li>a</li> <li>a+b</li> <li>demo(1) // 函数调用表达式</li> <li>arr.map()</li> <li>function test () {}</li> <li>语句(代码)：</li> <li>下面这些都是语句(代码)：</li> <li>if(){ }</li> <li>for(){ }</li> <li>switch( ){case:xxxx}</li></ol> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <ol><li>遇到 <code>&lt;</code> 开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析</li> <li>遇到以 <code>{</code> 开头的代码，以JS语法解析: 标签中的js表达式必须用<code>{ }</code>包含</li></ol> <h1 id="基本理解和使用"><a href="#基本理解和使用" class="header-anchor">#</a> 基本理解和使用</h1> <h2 id="函数式组件"><a href="#函数式组件" class="header-anchor">#</a> 函数式组件</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// 1. 创建函数式组件</span>
<span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//此处的this是undefined，因为babel编译后开启了严格模式</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是用函数定义的组件（适用于简单组件的定义）</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">}</span>
<span class="token comment">// 2. 渲染组件到页面</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0c862f85b5647cca943f054ac5b4980~tplv-k3u1fbpfcp-watermark.image?" alt="image.png">
执行了<code>ReactDOM.render(&lt;MyComponent/&gt;.......</code>之后，发生了什么？</p> <ol><li>React解析组件标签，找到了MyComponent组件。</li> <li>发现组件是使用函数定义的，随后<strong>调用该函数</strong>，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。</li></ol> <h3 id="补充】严格模式中的this"><a href="#补充】严格模式中的this" class="header-anchor">#</a> 补充】严格模式中的this</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">function</span> <span class="token function">sayThis</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">sayThis</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// Window {...}</span>

<span class="token keyword">function</span> <span class="token function">sayThis2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token string">'use strict'</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">sayThis2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li><code>如果不开启严格模式，直接调用函数，函数中的this指向window</code></li> <li><code>如果开启了严格模式，直接调用函数，函数中的this是undefined</code></li></ul> <h2 id="类式组件"><a href="#类式组件" class="header-anchor">#</a> 类式组件</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//1.创建类式组件</span>
<span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token comment">//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。</span>
	<span class="token comment">//render中的this是谁？—— MyComponent的实例对象 &lt;=&gt; MyComponent组件实例对象。</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'render中的this:'</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是用类定义的组件(适用于【复杂组件】的定义)</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//2.渲染组件到页面</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyComponent</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><strong>执行了ReactDOM.render(<MyComponent></MyComponent>.......之后，发生了什么？</strong></p> <p><code>React解析组件标签，找到了MyComponent组件。 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。</code></p> <h3 id="【补充】关于es6中类的注意事项"><a href="#【补充】关于es6中类的注意事项" class="header-anchor">#</a> 【补充】关于ES6中类的注意事项</h3> <ol><li>类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。</li> <li>如果A类继承了B类，且A类中写了构造器，那么A类构造器中的<code>super</code>是必须要调用的。</li> <li>类中所定义的方法，都放在了类的原型对象上，供实例去使用。</li></ol> <h2 id="注意"><a href="#注意" class="header-anchor">#</a> 注意</h2> <ol><li>组件名必须<strong>首字母大写</strong></li> <li>虚拟DOM元素只能有<strong>一个</strong>根元素</li> <li>虚拟DOM元素必须有<strong>结束</strong>标签</li></ol> <ul><li>重点关注下渲染类组件标签的基本流程</li></ul> <ol><li>React内部会创建组件实例对象</li> <li>调用<code>render()</code>得到虚拟DOM, 并解析为真实DOM</li> <li>插入到指定的页面元素内部</li></ol> <h1 id="组件实例的三大核心属性1-state-状态"><a href="#组件实例的三大核心属性1-state-状态" class="header-anchor">#</a> 组件实例的三大核心属性1: <code>state</code> 状态</h1> <h2 id="理解"><a href="#理解" class="header-anchor">#</a> 理解</h2> <ol><li><code>state</code>是组件对象最重要的属性, 值是对象(可以包含多个<code>key-value</code>的组合)</li> <li>组件被称为&quot;状态机&quot;, 通过更新组件的<code>state</code>来更新对应的页面显示(重新渲染组件)</li></ol> <h4 id="补充】类中方法的this指向问题"><a href="#补充】类中方法的this指向问题" class="header-anchor">#</a> 补充】类中方法的this指向问题</h4> <ol><li>类中定义的方法，在内部默认开启了<strong>局部</strong>的严格模式\</li> <li>开启严格模式，函数如果直接调用，this不会指向window，而是undefined</li></ol> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
	<span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
  <span class="token punctuation">}</span>
  <span class="token function">study</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token comment">//study方法放在了哪里？——类的原型对象上，供实例使用</span>
	<span class="token comment">//通过Person实例调用study时，study中的this就是Person实例</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'tom'</span><span class="token punctuation">,</span><span class="token number">18</span><span class="token punctuation">)</span>
p1<span class="token punctuation">.</span><span class="token function">study</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//通过实例调用study方法  Person</span>
<span class="token keyword">const</span> x <span class="token operator">=</span> p1<span class="token punctuation">.</span>study
<span class="token function">x</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 直接调用 undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>注意</p> <ul><li>组件中render方法中的this为组件实例对象</li> <li>组件自定义的方法中this为undefined，如何解决？</li> <li>a) 强制绑定this: 通过函数对象的bind()</li> <li>b) 箭头函数 + 赋值语句</li> <li>状态数据state，不能直接修改或更新</li> <li>状态必须通过setState()进行更新, 且更新是一种合并，不是替换。</li></ul> <h1 id="组件实例的三大核心属性2-props"><a href="#组件实例的三大核心属性2-props" class="header-anchor">#</a> 组件实例的三大核心属性2: <code>props</code></h1> <h2 id="理解-2"><a href="#理解-2" class="header-anchor">#</a> 理解</h2> <ol><li>每个组件对象都会有<code>props</code>(properties的简写)属性</li> <li>组件标签的所有属性都保存在<code>props</code>中</li></ol> <h2 id="作用"><a href="#作用" class="header-anchor">#</a> 作用</h2> <ol><li>通过标签属性从组件<strong>外</strong>向组件<strong>内</strong>传递变化的数据</li> <li>注意: 组件内部<strong>不可修改</strong><code>props</code>数据，是只读的</li></ol> <h2 id="使用指南"><a href="#使用指南" class="header-anchor">#</a> 使用指南</h2> <h3 id="内部读取某个属性值"><a href="#内部读取某个属性值" class="header-anchor">#</a> 内部读取某个属性值</h3> <p><code>this.props.name</code></p> <h3 id="扩展属性-将对象的所有属性通过props传递-批量传递标签属性"><a href="#扩展属性-将对象的所有属性通过props传递-批量传递标签属性" class="header-anchor">#</a> 扩展属性: 将对象的所有属性通过<code>props</code>传递（批量传递标签属性）</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code>ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Person</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yk<span class="token punctuation">&quot;</span></span> <span class="token attr-name">age</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>18<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>男<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'yk'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token string">'男'</span><span class="token punctuation">}</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Person</span></span> <span class="token spread"><span class="token punctuation">{</span> <span class="token operator">...</span>person <span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

#### 【补充】展开运算符
<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>` jsx
<span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span>
<span class="token comment">// 1. 展开一个数组</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">...</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1 3 5 7 9</span>
<span class="token comment">// 2. 连接数组</span>
<span class="token keyword">let</span> arr3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span> <span class="token operator">...</span>arr2<span class="token punctuation">]</span>

<span class="token comment">// 3. 在函数中使用</span>
<span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>numbers</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> numbers<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">preValue<span class="token punctuation">,</span> currentValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> preValue <span class="token operator">+</span> currentValue
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>

<span class="token comment">// 4. 构造字面量对象时使用展开语法</span>
<span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'tom'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span>
<span class="token punctuation">}</span>

<span class="token comment">// console.log(...person); // 报错，展开运算符不能展开对象</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>person<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// {name: &quot;tom&quot;, age: 18}</span>

<span class="token keyword">let</span> person2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>person <span class="token punctuation">}</span> <span class="token comment">// 可以拷贝一个对象</span>
person<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'jerry'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {name: &quot;tom&quot;, age: 18}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {name: &quot;jerry&quot;, age: 18}</span>

<span class="token comment">// 5. 合并对象</span>
<span class="token keyword">let</span> person3 <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>person<span class="token punctuation">,</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'jack'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;地球&quot;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>person3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {name: &quot;jack&quot;, age: 18, address: &quot;地球&quot;}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br></div></div><h3 id="对props中的属性值进行类型限制和必要性限制"><a href="#对props中的属性值进行类型限制和必要性限制" class="header-anchor">#</a> 对<code>props</code>中的属性值进行类型限制和必要性限制</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 引入prop-types，用于对组件标签属性进行限制 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../js/prop-types.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//对标签属性进行类型、必要性的限制</span>
Person<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span>PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span> <span class="token comment">// 限制name必传，且为字符串</span>
  <span class="token literal-property property">sex</span><span class="token operator">:</span>PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span> <span class="token comment">// 限制sex为字符串</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span>PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">,</span> <span class="token comment">// 限制age为数值</span>
  <span class="token literal-property property">speak</span><span class="token operator">:</span>PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span> <span class="token comment">// 限制speak为函数</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>可以写在类的里面，前面加<code>static</code>关键字</p> <h3 id="默认属性值"><a href="#默认属性值" class="header-anchor">#</a> 默认属性值</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//指定默认标签属性值</span>
Person<span class="token punctuation">.</span>defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
	<span class="token literal-property property">sex</span><span class="token operator">:</span><span class="token string">'男'</span><span class="token punctuation">,</span> <span class="token comment">// sex默认值为男</span>
	<span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span> <span class="token comment">//age默认值为18</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="组件类的构造函数"><a href="#组件类的构造函数" class="header-anchor">#</a> 组件类的构造函数</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">)</span><span class="token comment">//打印所有属性 }</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/837147102fd14df5ac63321abbb36a13~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p> <p><strong>构造器是否接收<code>props</code>，是否传递给<code>super</code>，取决于：是否希望在构造器中通过<code>this</code>访问<code>props</code></strong></p> <p>很多同学不知道这个为什么药使用super,是为了传递<strong>属性</strong></p> <h2 id="函数式组件使用props"><a href="#函数式组件使用props" class="header-anchor">#</a> 函数式组件使用<code>props</code></h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//创建组件</span>
<span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span>name<span class="token punctuation">,</span>age<span class="token punctuation">,</span>sex<span class="token punctuation">}</span> <span class="token operator">=</span> props
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
	  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">姓名：</span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">性别：</span><span class="token punctuation">{</span>sex<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">年龄：</span><span class="token punctuation">{</span>age<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
	<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
Person<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span>PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span> <span class="token comment">//限制name必传，且为字符串</span>
  <span class="token literal-property property">sex</span><span class="token operator">:</span>PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>  <span class="token comment">//限制sex为字符串</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span>PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">,</span>  <span class="token comment">//限制age为数值</span>
<span class="token punctuation">}</span>

<span class="token comment">// 指定默认标签属性值</span>
Person<span class="token punctuation">.</span>defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">sex</span><span class="token operator">:</span><span class="token string">'男'</span><span class="token punctuation">,</span><span class="token comment">// sex默认值为男</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span> <span class="token comment">// age默认值为18</span>
<span class="token punctuation">}</span>
<span class="token comment">//渲染组件到页面</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Person</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>jerry<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test1'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h1 id="refs与事件处理"><a href="#refs与事件处理" class="header-anchor">#</a> <code>refs</code>与事件处理</h1> <h2 id="理解-3"><a href="#理解-3" class="header-anchor">#</a> 理解</h2> <p>组件内的标签可以定义<code>ref</code>属性来标识自己</p> <h2 id="编码"><a href="#编码" class="header-anchor">#</a> 编码</h2> <h3 id="字符串形式的ref-新版本不推荐使用了"><a href="#字符串形式的ref-新版本不推荐使用了" class="header-anchor">#</a> 字符串形式的<code>ref</code>（新版本不推荐使用了）</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input1<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">.</span>input1
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h4> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//创建组件</span>
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{</span>
  <span class="token comment">//展示左侧输入框的数据</span>
  <span class="token function-variable function">showData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token keyword">const</span> <span class="token punctuation">{</span>input1<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>refs
	<span class="token function">alert</span><span class="token punctuation">(</span>input1<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//展示右侧输入框的数据</span>
  <span class="token function-variable function">showData2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token keyword">const</span> <span class="token punctuation">{</span>input2<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>refs
	<span class="token function">alert</span><span class="token punctuation">(</span>input2<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">return</span><span class="token punctuation">(</span>
	  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点击按钮提示数据<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">&amp;nbsp;
	    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showData<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">点我提示左侧的数据</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
	    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">onBlur</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showData2<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>失去焦点提示数据<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
	  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//渲染组件到页面</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="回调形式的ref"><a href="#回调形式的ref" class="header-anchor">#</a> 回调形式的<code>ref</code></h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">currentNode</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>input1 <span class="token operator">=</span> currentNode<span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token comment">//简写</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>input1 <span class="token operator">=</span> c <span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h4 id="示例-2"><a href="#示例-2" class="header-anchor">#</a> 示例</h4> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//创建组件</span>
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{</span>
  <span class="token comment">//展示左侧输入框的数据</span>
  <span class="token function-variable function">showData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token keyword">const</span> <span class="token punctuation">{</span>input1<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
	<span class="token function">alert</span><span class="token punctuation">(</span>input1<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//展示右侧输入框的数据</span>
  <span class="token function-variable function">showData2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token keyword">const</span> <span class="token punctuation">{</span>input2<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
	<span class="token function">alert</span><span class="token punctuation">(</span>input2<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">return</span><span class="token punctuation">(</span>
	  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>input1 <span class="token operator">=</span> c <span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点击按钮提示数据<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">&amp;nbsp;
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showData<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">点我提示左侧的数据</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">onBlur</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showData2<span class="token punctuation">}</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>input2 <span class="token operator">=</span> c <span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>失去焦点提示数据<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">&amp;nbsp;
	  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//渲染组件到页面</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h4 id="回调执行次数"><a href="#回调执行次数" class="header-anchor">#</a> 回调执行次数</h4> <p>内联的回调，渲染时调用一次，每次更新都会执行两次<br>
类绑定的回调，就在初始渲染时调用一次
影响不大，日常开发基本都用<strong>内联</strong>，方便一点</p> <h3 id="createref创建ref容器"><a href="#createref创建ref容器" class="header-anchor">#</a> <code>createRef</code>创建<code>ref</code>容器</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// React.createRef调用后可以返回一个容器 // 该容器可以存储被ref所标识的节点,该容器是“专人专用”的 </span>
myRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myRef<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h4> <p><code>this.myRef.current</code></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//创建组件</span>
<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{</span>

  myRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  myRef2 <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">//展示左侧输入框的数据</span>
  <span class="token function-variable function">showData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>myRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//展示右侧输入框的数据</span>
  <span class="token function-variable function">showData2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>myRef2<span class="token punctuation">.</span>current<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">return</span><span class="token punctuation">(</span>
	  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myRef<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>点击按钮提示数据<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">&amp;nbsp;
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showData<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">点我提示左侧的数据</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">onBlur</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showData2<span class="token punctuation">}</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myRef2<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>失去焦点提示数据<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">&amp;nbsp;
	  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//渲染组件到页面</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="react中的事件处理"><a href="#react中的事件处理" class="header-anchor">#</a> React中的事件处理</h3> <ol><li>通过onXxx属性指定事件处理函数(注意大小写)</li> <li>React使用的是自定义(合成)事件, 而不是使用的原生DOM事件----为了更好的兼容性</li> <li>React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ----为了的高效</li> <li>通过event.target得到发生事件的DOM元素对象----不要过度使用ref</li></ol> <h1 id="收集表单数据"><a href="#收集表单数据" class="header-anchor">#</a> 收集表单数据</h1> <h2 id="理解-4"><a href="#理解-4" class="header-anchor">#</a> 理解</h2> <ol><li>受控组件</li> <li>非受控组件</li></ol> <h2 id="非受控组件"><a href="#非受控组件" class="header-anchor">#</a> 非受控组件</h2> <p>页面中所有输入类DOM的值，都是现用现取的</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// 创建组件</span>
<span class="token keyword">class</span> <span class="token class-name">Login</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">handleSubmit</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 阻止表单提交</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>username<span class="token punctuation">,</span> password<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">您输入的用户名是 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>username<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">，您输入的密码是：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>password<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com/<span class="token punctuation">&quot;</span></span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        用户名：</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>username <span class="token operator">=</span> c<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        密码：</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>password <span class="token operator">=</span> c<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">登录</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">  
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 渲染组件</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Login</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="受控组件"><a href="#受控组件" class="header-anchor">#</a> 受控组件</h2> <p>页面中输入类的DOM，随着输入的过程，将数据存储在状态<code>state</code>中，需要用的时候在从状态<code>state</code>中取（有点类似Vue中的双向数据绑定）</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// 创建组件</span>
<span class="token keyword">class</span> <span class="token class-name">Login</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token comment">// 初始化状态</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">''</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 保存用户名到状态中</span>
  <span class="token function-variable function">saveUsername</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">username</span><span class="token operator">:</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 保存密码到状态中</span>
  <span class="token function-variable function">savePassword</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">password</span><span class="token operator">:</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 表单提交的回调</span>
  <span class="token function-variable function">handleSubmit</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>username<span class="token punctuation">,</span> password<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">您输入的用户名是 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>username<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">，您输入的密码是：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>password<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com/<span class="token punctuation">&quot;</span></span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        用户名：</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>saveUsername<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        密码：</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>savePassword<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">登录</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">  
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 渲染组件</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Login</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><h1 id="高阶函数与函数的柯里化"><a href="#高阶函数与函数的柯里化" class="header-anchor">#</a> 高阶函数与函数的柯里化</h1> <h3 id="高阶函数"><a href="#高阶函数" class="header-anchor">#</a> 高阶函数</h3> <ul><li>高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。</li> <li>若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。</li> <li>若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。</li> <li>常见的高阶函数有：Promise、setTimeout、arr.map()等等</li></ul> <h2 id="函数的柯里化"><a href="#函数的柯里化" class="header-anchor">#</a> 函数的柯里化</h2> <p><strong>函数的柯里化</strong>：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">function</span> <span class="token function">sum1</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token operator">+</span> c<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">sum1</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span>

<span class="token comment">// 柯里化后</span>
<span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span><span class="token punctuation">(</span><span class="token parameter">b</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">c</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	  <span class="token keyword">return</span> a<span class="token operator">+</span>b<span class="token operator">+</span>c
	<span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//创建组件</span>
<span class="token keyword">class</span> <span class="token class-name">Login</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{</span>
  <span class="token comment">//初始化状态</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">username</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">//用户名</span>
    <span class="token literal-property property">password</span><span class="token operator">:</span><span class="token string">''</span> <span class="token comment">//密码</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//保存表单数据到状态中 （高阶函数+函数柯里化）</span>
  <span class="token function-variable function">saveFormData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">dataType</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">[</span>dataType<span class="token punctuation">]</span><span class="token operator">:</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//表单提交的回调</span>
  <span class="token function-variable function">handleSubmit</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//阻止表单提交</span>
	<span class="token keyword">const</span> <span class="token punctuation">{</span>username<span class="token punctuation">,</span>password<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
	<span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">你输入的用户名是：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>username<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,你输入的密码是：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>password<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">return</span><span class="token punctuation">(</span>
	  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSubmit<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
		用户名：</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">saveFormData</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
		密码：</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">saveFormData</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">登录</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
	<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//渲染组件</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Login</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h1 id="组件的生命周期"><a href="#组件的生命周期" class="header-anchor">#</a> 组件的生命周期</h1> <h2 id="理解-5"><a href="#理解-5" class="header-anchor">#</a> 理解</h2> <ol><li>组件从创建到死亡它会经历一些特定的阶段。</li> <li>React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。</li> <li>我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。</li></ol> <h2 id="引入案例"><a href="#引入案例" class="header-anchor">#</a> 引入案例</h2> <p>需求:定义组件实现以下功能：</p> <ol><li>让指定的文本做显示 / 隐藏的渐变动画</li> <li>从完全可见，到彻底消失，耗时2S</li> <li>点击“不活了”按钮从界面中卸载组件</li></ol> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//创建组件</span>
<span class="token comment">//生命周期回调函数 &lt;=&gt; 生命周期钩子函数 &lt;=&gt; 生命周期函数 &lt;=&gt; 生命周期钩子</span>
<span class="token keyword">class</span> <span class="token class-name">Life</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{</span>

  state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">opacity</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">}</span>

  <span class="token function-variable function">death</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token comment">//卸载组件</span>
	ReactDOM<span class="token punctuation">.</span><span class="token function">unmountComponentAtNode</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//组件挂完毕</span>
  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'componentDidMount'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>timer <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	  <span class="token comment">//获取原状态</span>
	  <span class="token keyword">let</span> <span class="token punctuation">{</span>opacity<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
	  <span class="token comment">//减小0.1</span>
	  opacity <span class="token operator">-=</span> <span class="token number">0.1</span>
	  <span class="token keyword">if</span><span class="token punctuation">(</span>opacity <span class="token operator">&lt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> opacity <span class="token operator">=</span> <span class="token number">1</span>
	  <span class="token comment">//设置新的透明度</span>
	  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>opacity<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//组件将要卸载</span>
  <span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token comment">//清除定时器</span>
	<span class="token function">clearInterval</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>timer<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//初始化渲染、状态更新之后</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'render'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">return</span><span class="token punctuation">(</span>
	  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token literal-property property">opacity</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>opacity<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">React学不会怎么办？</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>death<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">不活了</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//渲染组件</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Life</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div><h2 id="生命周期的三个阶段-旧"><a href="#生命周期的三个阶段-旧" class="header-anchor">#</a> 生命周期的三个阶段（旧）</h2> <p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20c5722a932942a1b296c520d0ff2698~tplv-k3u1fbpfcp-watermark.image?" alt="20210608114316605.png">
初始化阶段</p> <ul><li>由ReactDOM.render()触发—初次渲染</li> <li>constructor() —— 类组件中的构造函数</li> <li>componentWillMount() —— 组件将要挂载 【即将废弃】</li> <li>render() —— 挂载组件</li> <li>componentDidMount() —— 组件挂载完成 比较常用</li> <li>一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息</li></ul> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">class</span> <span class="token class-name">Count</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{</span>
  <span class="token comment">// 构造器</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'constructor'</span><span class="token punctuation">)</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Count---constructor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
	<span class="token comment">//初始化状态</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>count<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span> count<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  
  <span class="token comment">//组件将要挂载的钩子</span>
  <span class="token function">componentWillMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'componentWillMount'</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Count---componentWillMount'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'render'</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Count---render'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>count<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
    <span class="token keyword">return</span><span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前计数值：</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>add<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">点我+1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//组件挂载完毕的钩子</span>
  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'componentDidMount'</span><span class="token punctuation">)</span>
	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Count---componentDidMount'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Count</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><p><strong>更新阶段【第一种情况】父组件重新render触发</strong></p> <p>componentWillReceiveProps() —— 接收属性参数（非首次）【即将废弃】
然后调用下面的钩子函数</p> <p><strong>【第二种情况】由组件内部this.setSate()</strong></p> <p>shouldComponentUpdate() —— 组件是否应该被更新（默认返回true）
然后调用下面的钩子函数</p> <p><strong>【第三种情况】强制更新 forceUpdate()</strong></p> <p>componentWillUpdate() ——组件将要更新 【即将废弃】
render() —— 组件更新
componentDidUpdate() —— 组件完成更新</p> <h3 id="卸载组件"><a href="#卸载组件" class="header-anchor">#</a> 卸载组件</h3> <p>由<code>ReactDOM.unmountComponentAtNode()</code>触发</p> <ol><li><code>componentWillUnmount()</code> —— 组件即将卸载</li></ol> <h2 id="生命周期的三个阶段-新"><a href="#生命周期的三个阶段-新" class="header-anchor">#</a> 生命周期的三个阶段（新）</h2> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/770ef082a3ff4a6b868c230145f705ee~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p> <h4 id="更新阶段"><a href="#更新阶段" class="header-anchor">#</a> 更新阶段</h4> <ul><li>由组件内部this.setSate()或父组件重新render触发或强制更新forceUpdate()</li> <li>getDerivedStateFromProps() —— 从props得到一个派生的状态 【新增】</li> <li>shouldComponentUpdate() —— 组件是否应该被更新（默认返回true）</li> <li>render() —— 挂载组件</li> <li>getSnapshotBeforeUpdate() —— 在更新之前获取快照【新增】</li> <li>componentDidUpdate(prevProps, prevState, snapshotValue) —— 组件完成更新</li></ul> <ol start="3"><li>卸载组件</li></ol> <ul><li>由ReactDOM.unmountComponentAtNode()触发</li> <li>componentWillUnmount() —— 组件即将卸载</li></ul> <h2 id="重要的勾子"><a href="#重要的勾子" class="header-anchor">#</a> 重要的勾子</h2> <ol><li><code>render</code>：初始化渲染或更新渲染调用</li> <li><code>componentDidMount</code>：开启监听, 发送ajax请求</li> <li><code>componentWillUnmount</code>：做一些收尾工作, 如: 清理定时器</li></ol> <h2 id="即将废弃的勾子"><a href="#即将废弃的勾子" class="header-anchor">#</a> 即将废弃的勾子</h2> <ol><li><code>componentWillMount</code></li> <li><code>componentWillReceiveProps</code></li> <li><code>componentWillUpdate</code></li></ol> <p>现在使用会出现警告，下一个大版本需要加上<code>UNSAFE_</code>前缀才能使用，以后可能会被彻底废弃，不建议使用。</p> <h1 id="虚拟dom与dom-diffing算法"><a href="#虚拟dom与dom-diffing算法" class="header-anchor">#</a> 虚拟DOM与DOM Diffing算法</h1> <h2 id="基本原理图"><a href="#基本原理图" class="header-anchor">#</a> 基本原理图</h2> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/071c6df30e1744e192e81088711b1d09~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p> <h2 id="关于key的经典面试题"><a href="#关于key的经典面试题" class="header-anchor">#</a> 关于key的经典面试题</h2> <p>react/vue中的key有什么作用？（key的内部原理是什么？）
为什么遍历列表时，key最好不要用index?
虚拟DOM中key的作用
简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。</p> <p>详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：</p> <ul><li>旧虚拟DOM中找到了与新虚拟DOM相同的key：
<ul><li>(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM</li> <li>(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM</li></ul></li> <li>旧虚拟DOM中未找到与新虚拟DOM相同的key
<ul><li>根据数据创建新的真实DOM，随后渲染到到页面</li></ul></li></ul> <h4 id="用index作为key可能会引发的问题"><a href="#用index作为key可能会引发的问题" class="header-anchor">#</a> 用index作为key可能会引发的问题</h4> <p>若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==&gt; 界面效果没问题, 但效率低</p> <p>如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==&gt; 界面有问题</p> <p>注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
仅用于渲染列表用于展示，使用index作为key是没有问题的</p> <h2 id="spa的理解"><a href="#spa的理解" class="header-anchor">#</a> SPA的理解</h2> <ol><li>单页Web应用（single page web application，<code>SPA</code>）</li> <li>整个应用只有一个完整的页面。</li> <li>点击页面中的链接不会刷新页面，只会做页面的局部更新。</li> <li>数据都需要通过<code>ajax</code>请求获取, 并在前端异步展现。</li></ol> <h2 id="路由的理解"><a href="#路由的理解" class="header-anchor">#</a> 路由的理解</h2> <h3 id="什么是路由"><a href="#什么是路由" class="header-anchor">#</a> 什么是路由?</h3> <ol><li>一个路由就是一个映射关系(<code>key: value</code>)</li> <li><code>key</code>为路径, <code>value</code>可能是<code>function</code>或<code>component</code></li></ol> <h3 id="路由分类"><a href="#路由分类" class="header-anchor">#</a> 路由分类</h3> <h4 id="后端路由"><a href="#后端路由" class="header-anchor">#</a> 后端路由</h4> <ol><li>理解： <code>value</code>是<code>function</code>, 用来处理客户端提交的请求。</li> <li>注册路由： <code>router.get(path, function(req, res))</code></li> <li>工作过程：当<code>node</code>接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据</li></ol> <h4 id="前端路由"><a href="#前端路由" class="header-anchor">#</a> 前端路由</h4> <ol><li>浏览器端路由，value是<code>component</code>，用于展示页面内容。</li> <li>注册路由: <code>&lt;Route path=&quot;/test&quot; component={Test}&gt;</code></li> <li>工作过程：当浏览器的<code>path</code>变为<code>/test</code>时, 当前路由组件就会变为<code>Test</code>组件</li></ol> <h2 id="react-router-dom-的理解"><a href="#react-router-dom-的理解" class="header-anchor">#</a> <a href="https://so.csdn.net/so/search?from=pc_blog_highlight&amp;q=react" target="_blank" rel="noopener noreferrer">react<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>-router-dom 的理解</h2> <ol><li><code>React</code>的一个插件库。</li> <li>专门用来实现一个SPA应用。</li> <li>基于<code>React</code>的项目基本都会用到此库。</li></ol> <h1 id="react-router-dom相关api"><a href="#react-router-dom相关api" class="header-anchor">#</a> react-router-dom相关API</h1> <h2 id="内置组件"><a href="#内置组件" class="header-anchor">#</a> 内置组件</h2> <ol><li><code>&lt;BrowserRouter&gt;</code></li> <li><code>&lt;HashRouter&gt;</code></li> <li><code>&lt;Route&gt;</code></li> <li><code>&lt;Redirect&gt;</code></li> <li><code>&lt;Link&gt;</code></li> <li><code>&lt;NavLink&gt;</code></li> <li><code>&lt;Switch&gt;</code></li></ol> <h2 id="其它"><a href="#其它" class="header-anchor">#</a> 其它</h2> <ol><li><code>history</code>对象</li> <li><code>match</code>对象</li> <li><code>withRouter</code>函数</li></ol> <h1 id="基本路由使用"><a href="#基本路由使用" class="header-anchor">#</a> 基本路由使用</h1> <h2 id="效果"><a href="#效果" class="header-anchor">#</a> 效果</h2> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f304b8da020540349edf82b6c9494557~tplv-k3u1fbpfcp-watermark.image?" alt="2021061416445215.gif"></p> <h2 id="准备"><a href="#准备" class="header-anchor">#</a> 准备</h2> <ol><li>下载react-router-dom: <code>npm install react-router-dom</code><br> <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa3f07a7ff4d423cbeb0e80d67e224c5~tplv-k3u1fbpfcp-zoom-1.image" alt="在这里插入图片描述"></li> <li>引入bootstrap.css: <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/css/bootstrap.css&quot;&gt;</code></li></ol> <h2 id="路由的基本使用"><a href="#路由的基本使用" class="header-anchor">#</a> 路由的基本使用</h2> <p>明确好界面中的导航区、展示区
导航区的a标签改为Link标签
<code>&lt;Link to=&quot;/xxxxx&quot;&gt;Demo&lt;/Link&gt;</code>
展示区写Route标签进行路径的匹配</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/xxxx<span class="token punctuation">'</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Demo<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">的最外侧包裹了一个</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">或</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">HashRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span></code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="实现"><a href="#实现" class="header-anchor">#</a> 实现</h2> <h3 id="index-js"><a href="#index-js" class="header-anchor">#</a> index.js</h3> <p>这里用一个标签将整个App包起来，保证使用的是同一个路由器</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//引入react核心库</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token comment">//引入ReactDOM</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span>
<span class="token comment">//</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>BrowserRouter<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token comment">//引入App</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">,</span>
	document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span>
<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">### App.jsx
</span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span> jsx
<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Link<span class="token punctuation">,</span>Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./Home'</span>
<span class="token keyword">import</span> About <span class="token keyword">from</span> <span class="token string">'./About'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-xs-offset-2 col-xs-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page-header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">React Router Demo</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-xs-2 col-xs-offset-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token punctuation">{</span><span class="token comment">/* 原生html中，靠&lt;a&gt;跳转不同的页面 */</span><span class="token punctuation">}</span><span class="token plain-text">
            </span><span class="token punctuation">{</span><span class="token comment">/* &lt;a className=&quot;list-group-item&quot; href=&quot;./about.html&quot;&gt;About&lt;/a&gt;
            &lt;a className=&quot;list-group-item active&quot; href=&quot;./home.html&quot;&gt;Home&lt;/a&gt; */</span><span class="token punctuation">}</span><span class="token plain-text">

            </span><span class="token punctuation">{</span><span class="token comment">/* 在React中靠路由链接实现切换组件--编写路由链接 */</span><span class="token punctuation">}</span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Link</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">About</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Link</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Home</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-xs-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>panel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>panel-body<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token punctuation">{</span><span class="token comment">/* 注册路由 */</span><span class="token punctuation">}</span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/about<span class="token punctuation">'</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>About<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/home<span class="token punctuation">'</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br></div></div><h2 id="路由组件与一般组件的区别"><a href="#路由组件与一般组件的区别" class="header-anchor">#</a> 路由组件与一般组件的区别</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code>     <span class="token literal-property property">history</span><span class="token operator">:</span>
	<span class="token literal-property property">go</span><span class="token operator">:</span> ƒ <span class="token function">go</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span>
	<span class="token literal-property property">goBack</span><span class="token operator">:</span> ƒ <span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
	<span class="token literal-property property">goForward</span><span class="token operator">:</span> ƒ <span class="token function">goForward</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
	<span class="token literal-property property">push</span><span class="token operator">:</span> ƒ <span class="token function">push</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> state<span class="token punctuation">)</span>
	<span class="token literal-property property">replace</span><span class="token operator">:</span> ƒ <span class="token function">replace</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> state<span class="token punctuation">)</span>
     <span class="token literal-property property">location</span><span class="token operator">:</span>
         <span class="token literal-property property">pathname</span><span class="token operator">:</span> <span class="token string">&quot;/about&quot;</span>
         <span class="token literal-property property">search</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span>
         <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token keyword">undefined</span>
     <span class="token literal-property property">match</span><span class="token operator">:</span>
         <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
         <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&quot;/about&quot;</span>
         <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;/about&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>NavLink与封装NavLink
NavLink可以实现路由链接的高亮，通过activeClassName属性指定样式名，默认是&quot;active&quot;</p> <p><code>&lt;NavLink activeClassName=&quot;demo&quot; className=&quot;list-group-item&quot; to=&quot;/home&quot;&gt;Home&lt;/NavLink&gt;</code>
可以自己封装一个NavLink【一般组件】</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>NavLink<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">MyNavLink</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token comment">// console.log(this.props);</span>
	<span class="token keyword">return</span> <span class="token punctuation">(</span>
	  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavLik</span></span> <span class="token attr-name">activeClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group-item<span class="token punctuation">&quot;</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
	<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>标签体内容是特殊的标签属性通过this.props.children可以获取标签体内容<br>
使用
<code>&lt;MyNavLink to=&quot;/about&quot;&gt;About&lt;/MyNavLink&gt; &lt;MyNavLink to=&quot;/home&quot;&gt;Home&lt;/MyNavLink&gt;</code></p> <h2 id="switch的使用"><a href="#switch的使用" class="header-anchor">#</a> Switch的使用</h2> <ol><li>通常情况下，path和component是一一对应的关系。</li> <li>Switch可以提高路由匹配效率(单一匹配)。</li></ol> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Switch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>About<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Test<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Switch</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>这样只要匹配到了第一个就不会再往下匹配了</p> <h2 id="解决多级路径刷新页面样式丢失的问题"><a href="#解决多级路径刷新页面样式丢失的问题" class="header-anchor">#</a> 解决多级路径刷新页面样式丢失的问题</h2> <ol><li>public/index.html 中 引入样式时不写 <code>./</code> 写 <code>/</code> （常用）【绝对路径】</li> <li>public/index.html 中 引入样式时不写 <code>./</code> 写 <code>%PUBLIC_URL%</code> （常用）</li> <li>使用<code>HashRouter</code></li></ol> <h2 id="路由的严格匹配与模糊匹配"><a href="#路由的严格匹配与模糊匹配" class="header-anchor">#</a> 路由的严格匹配与模糊匹配</h2> <ol><li>默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）</li> <li>开启严格匹配：<code>&lt;Route exact={true} path=&quot;/about&quot; component={About}/&gt;</code></li> <li>严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由</li></ol> <h2 id="redirect的使用-【重定向】"><a href="#redirect的使用-【重定向】" class="header-anchor">#</a> Redirect的使用 【重定向】</h2> <ol><li>一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由</li> <li>具体编码：</li></ol> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Switch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>About<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Redirect</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Switch</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h1 id="嵌套路由使用"><a href="#嵌套路由使用" class="header-anchor">#</a> 嵌套路由使用</h1> <h2 id="效果-2"><a href="#效果-2" class="header-anchor">#</a> 效果</h2> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1f30d888aad49e6bac704bac02a1acf~tplv-k3u1fbpfcp-watermark.image?" alt="20210614220947211.gif"></p> <h2 id="注意-2"><a href="#注意-2" class="header-anchor">#</a> 注意</h2> <ol><li>注册子路由时要写上父路由的path值</li> <li>路由的匹配是按照注册路由的顺序进行的</li></ol> <h2 id="实现-2"><a href="#实现-2" class="header-anchor">#</a> 实现</h2> <h3 id="home-index-jsx"><a href="#home-index-jsx" class="header-anchor">#</a> Home/index.jsx</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Route<span class="token punctuation">,</span> NavLink<span class="token punctuation">,</span>Redirect<span class="token punctuation">,</span>Switch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token keyword">import</span> News <span class="token keyword">from</span> <span class="token string">'./News'</span>
<span class="token keyword">import</span> Message <span class="token keyword">from</span> <span class="token string">'./Message'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是Home的内容</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav nav-tabs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavLink</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/news<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">News</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavLink</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavLink</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Message</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavLink</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Switch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/home/news<span class="token punctuation">'</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>News<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/home/message<span class="token punctuation">'</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Message<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Redirect</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/home/news<span class="token punctuation">'</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Switch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h1 id="向路由组件传递参数数据"><a href="#向路由组件传递参数数据" class="header-anchor">#</a> 向路由组件传递参数数据</h1> <h2 id="效果-3"><a href="#效果-3" class="header-anchor">#</a> 效果</h2> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ad73391ce2542799a57836e3a868c8c~tplv-k3u1fbpfcp-watermark.image?" alt="20210614225203116.gif"></p> <h2 id="具体方法"><a href="#具体方法" class="header-anchor">#</a> 具体方法</h2> <p>方法1. params参数
路由链接(携带参数)：<code>&lt;Link to='/demo/test/tom/18'}&gt;详情&lt;/Link&gt;</code>
注册路由(声明接收)：<code>&lt;Route path=&quot;/demo/test/:name/:age&quot; component={Test}/&gt;</code>
接收参数：<code>&lt;Route path=&quot;/demo/test/:name/:age&quot; component={Test}/&gt;</code></p> <h4 id="message-index-jsx"><a href="#message-index-jsx" class="header-anchor">#</a> Message/index.jsx</h4> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Link<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./Detail'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Message</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">messageArr</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'01'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'消息1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'02'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'消息2'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'03'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'消息3'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> messageArr <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token punctuation">{</span>
            messageArr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">msgObj</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
              <span class="token keyword">return</span> <span class="token punctuation">(</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>msgObj<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                  </span><span class="token punctuation">{</span><span class="token comment">/* 向路由组件传递params参数 */</span><span class="token punctuation">}</span><span class="token plain-text">
                  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/home/message/detail/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>msgObj<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>msgObj<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>msgObj<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
              <span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token comment">/* 声明接收params参数 */</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/message/detail/:id/:title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Detail<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><h4 id="detail-index-jsx"><a href="#detail-index-jsx" class="header-anchor">#</a> Detail/index.jsx</h4> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7b56e39ce3f4518a173b4201b8297a4~tplv-k3u1fbpfcp-watermark.image?" alt="20210614224952124.png"></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Detail</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">detailData</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'01'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'你好啊'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'02'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'还不错鸭'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'03'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'显示我吧'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">)</span>
    <span class="token comment">// 接收params参数</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> title <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params
    <span class="token keyword">const</span> findResult<span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>detailData<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">dataObj</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> dataObj<span class="token punctuation">.</span>id <span class="token operator">===</span> id
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">ID: </span><span class="token punctuation">{</span>id <span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Title: </span><span class="token punctuation">{</span>title <span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Content: </span><span class="token punctuation">{</span> findResult<span class="token punctuation">.</span>content<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>方法2. search参数
路由链接(携带参数)：<code>&lt;Link to='/demo/test?name=tom&amp;age=18'}&gt;详情&lt;/Link&gt;</code></p> <p>注册路由(无需声明，正常注册即可)：<code>&lt;Route path=&quot;/demo/test&quot; component={Test}/&gt;</code></p> <p>接收参数：this.props.location.search</p> <p>备注：获取到的search是urlencoded编码字符串，需要借助querystring解析</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> qs <span class="token keyword">from</span> <span class="token string">'querystring'</span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'tom'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>qs<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// name=tom&amp;age=18</span>
<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'carName=Benz&amp;price=199'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>qs<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// {carName: 'Benz', price: 199}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>方法3. state参数</p> <p>路由链接(携带参数)：</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code>     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">pathname</span><span class="token operator">:</span><span class="token string">'/demo/test'</span><span class="token punctuation">,</span> <span class="token literal-property property">state</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'tom'</span><span class="token punctuation">,</span><span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">详情</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>注册路由(无需声明，正常注册即可)：</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/demo/test<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Test<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>接收参数：<code>this.props.location.state</code></p> <p>备注：刷新也可以保留住参数【history对象记录着在】</p> <h4 id="message-index-jsx-2"><a href="#message-index-jsx-2" class="header-anchor">#</a> Message/index.jsx</h4> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Message</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>messageArr<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token punctuation">{</span>
            messageArr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">msgObj</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
              <span class="token keyword">return</span> <span class="token punctuation">(</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>msgObj<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">

                  </span><span class="token punctuation">{</span><span class="token comment">/* 向路由组件传递params参数 */</span><span class="token punctuation">}</span><span class="token plain-text">
                  </span><span class="token punctuation">{</span><span class="token comment">/* &lt;Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}&gt;{msgObj.title}&lt;/Link&gt; */</span><span class="token punctuation">}</span><span class="token plain-text">

                  </span><span class="token punctuation">{</span><span class="token comment">/* 向路由组件传递search参数 */</span><span class="token punctuation">}</span><span class="token plain-text">
                  </span><span class="token punctuation">{</span><span class="token comment">/* &lt;Link to={`/home/message/detail/?id=${msgObj.id}&amp;title=${msgObj.title}`}&gt;{msgObj.title}&lt;/Link&gt; */</span><span class="token punctuation">}</span><span class="token plain-text">

                  </span><span class="token punctuation">{</span><span class="token comment">/* 向路由组件传递state参数 */</span><span class="token punctuation">}</span><span class="token plain-text">
                  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Link</span></span> <span class="token attr-name">to</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token literal-property property">pathname</span><span class="token operator">:</span><span class="token string">'/home/message/detail'</span><span class="token punctuation">,</span><span class="token literal-property property">state</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span>msgObj<span class="token punctuation">.</span>id<span class="token punctuation">,</span><span class="token literal-property property">title</span><span class="token operator">:</span>msgObj<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>msgObj<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">

                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
              <span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token comment">/* 声明接收params参数 */</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token comment">/* &lt;Route path=&quot;/home/message/detail/:id/:title&quot; component={Detail}/&gt; */</span><span class="token punctuation">}</span><span class="token plain-text">

        </span><span class="token punctuation">{</span><span class="token comment">/* search参数无需声明接收，正常注册路由即可 */</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token comment">/* &lt;Route path=&quot;/home/message/detail&quot; component={Detail}/&gt; */</span><span class="token punctuation">}</span><span class="token plain-text">

        </span><span class="token punctuation">{</span><span class="token comment">/* state参数无需声明接收，正常注册路由即可 */</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/message/detail<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Detail<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><h4 id="detail-index-jsx-2"><a href="#detail-index-jsx-2" class="header-anchor">#</a> Detail/index.jsx</h4> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token comment">// import qs from 'querystring'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Detail</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 接收params参数</span>
    <span class="token comment">// const {id,title} = this.props.match.params </span>

    <span class="token comment">// 接收search参数</span>
    <span class="token comment">// const {search} = this.props.location</span>
    <span class="token comment">// const {id,title} = qs.parse(search.slice(1))</span>

    <span class="token comment">// 接收state参数</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>id<span class="token punctuation">,</span>title<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>state <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

    <span class="token keyword">const</span> findResult <span class="token operator">=</span> DetailData<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">detailObj</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> detailObj<span class="token punctuation">.</span>id <span class="token operator">===</span> id
    <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">ID:</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">TITLE:</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">CONTENT:</span><span class="token punctuation">{</span>findResult<span class="token punctuation">.</span>content<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h3 id="多种路由跳转方式"><a href="#多种路由跳转方式" class="header-anchor">#</a> 多种路由跳转方式</h3> <h4 id="编程式路由导航"><a href="#编程式路由导航" class="header-anchor">#</a> 编程式路由导航</h4> <p>借助this.prosp.history对象上的API对操作路由跳转、前进、后退</p> <ul><li>this.prosp.history.push()</li> <li>this.prosp.history.replace()</li> <li>this.prosp.history.goBack()</li> <li>this.prosp.history.goForward()</li> <li>this.prosp.history.go()</li></ul> <p>withRouter的使用
<code>export default withRouter(Header)</code> <code>withRouter</code>可以加工一般组件，让一般组件具备路由组件所特有的API<br> <code>withRouter</code>的返回值是一个新组件</p> <h1 id="注意-3"><a href="#注意-3" class="header-anchor">#</a> 注意</h1> <h2 id="browserrouter与hashrouter的区别"><a href="#browserrouter与hashrouter的区别" class="header-anchor">#</a> BrowserRouter与HashRouter的区别</h2> <p>底层原理不一样：</p> <ul><li>BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。</li> <li>HashRouter使用的是URL的哈希值。</li> <li>path表现形式不一样</li> <li>BrowserRouter的路径中没有#,例如：localhost:3000/demo/test</li> <li>HashRouter的路径包含#,例如：localhost:3000/#/demo/test</li> <li>刷新后对路由state参数的影响
<ol><li>BrowserRouter没有任何影响，因为state保存在history对象中</li> <li>HashRouter刷新后会导致路由state参数的丢失！！！</li></ol></li> <li>备注：HashRouter可以用于解决一些路径错误相关的问题。</li></ul> <h1 id="redux理解"><a href="#redux理解" class="header-anchor">#</a> <a href="https://so.csdn.net/so/search?from=pc_blog_highlight&amp;q=redux" target="_blank" rel="noopener noreferrer">redux<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>理解</h1> <h2 id="相关文档"><a href="#相关文档" class="header-anchor">#</a> <a href=""></a><a href=""></a> 相关文档</h2> <p>中文文档: <a href="http://www.redux.org.cn/" target="_blank" rel="noopener noreferrer">http://www.redux.org.cn/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Github: <a href="https://github.com/reactjs/redux" target="_blank" rel="noopener noreferrer">https://github.com/reactjs/redux<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
先把它装上
<code>npm i redux</code></p> <h2 id="redux是什么"><a href="#redux是什么" class="header-anchor">#</a> redux是什么</h2> <ol><li>redux是一个专门用于做<code>状态管理</code>的JS库(不是react插件库)。</li> <li>可以用在react, angular, vue等项目中, 但基本与react配合使用。</li> <li>作用: 集中式管理react应用中多个组件<code>共享</code>的状态</li></ol> <h2 id="什么情况下需要使用redux"><a href="#什么情况下需要使用redux" class="header-anchor">#</a> 什么情况下需要使用redux</h2> <ol><li>某个组件的状态，需要让其他组件可以随时拿到（共享）</li> <li>一个组件需要改变另一个组件的状态（通信）</li> <li>总体原则：能不用就不用, 如果不用比较吃力才考虑使用</li></ol> <h2 id="redux工作流程"><a href="#redux工作流程" class="header-anchor">#</a> redux工作流程</h2> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d816d5cbefe24548a239065895bd2573~tplv-k3u1fbpfcp-watermark.image?" alt="20210615225020695.png"></p> <h1 id="redux的三个核心概念"><a href="#redux的三个核心概念" class="header-anchor">#</a> redux的三个核心概念</h1> <h2 id="action"><a href="#action" class="header-anchor">#</a> action</h2> <ol><li><p>动作的对象</p></li> <li><p>包含 2 个属性</p> <ul><li><code>type</code>：标识属性, 值为字符串, 唯一, 必要属性</li> <li><code>data</code>：数据属性, 值类型任意, 可选属性</li></ul></li> <li><p>例子：<code>{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }</code></p></li></ol> <h2 id="reducer"><a href="#reducer" class="header-anchor">#</a> reducer</h2> <ol><li>用于初始化状态、加工状态。</li> <li>加工时，根据旧的<code>state</code>和<code>action</code>， 产生新的<code>state</code>的纯函数。</li></ol> <h2 id="store"><a href="#store" class="header-anchor">#</a> store</h2> <p>将state、action、reducer联系在一起的对象</p> <p>如何得到此对象?</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span>
<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducers'</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>此对象的功能?</p> <ul><li>getState(): 得到state</li> <li>dispatch(action): 分发action, 触发reducer调用, 产生新的state</li> <li>subscribe(listener): 注册监听, 当产生了新的state时, 自动调用</li></ul> <h1 id="api"><a href="#api" class="header-anchor">#</a> API</h1> <h4 id="createstore"><a href="#createstore" class="header-anchor">#</a> createStore()</h4> <p>作用：创建包含指定reducer的store对象</p> <h4 id="store对象"><a href="#store对象" class="header-anchor">#</a> store对象</h4> <p>作用: redux库最核心的管理对象
它内部维护着:</p> <ul><li>state</li> <li>reducer
核心方法:
<code>getState()</code> <code>dispatch(action)</code> <code>subscribe(listener)</code>
具体编码:</li></ul> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code>store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span><span class="token string">'INCREMENT'</span><span class="token punctuation">,</span> number<span class="token punctuation">}</span><span class="token punctuation">)</span>
store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span>render<span class="token punctuation">)</span>
<span class="token function">applyMiddleware</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>作用：应用上基于redux的中间件(插件库)</p> <h4 id="combinereducers"><a href="#combinereducers" class="header-anchor">#</a> combineReducers()</h4> <p>作用：合并多个reducer函数</p> <h4 id="使用redux编写应用"><a href="#使用redux编写应用" class="header-anchor">#</a> 使用redux编写应用</h4> <p>效果</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4819bf7051747208e032e5641fbfae7~tplv-k3u1fbpfcp-watermark.image?" alt="20210617232712887.gif"></p> <h2 id="实现-3"><a href="#实现-3" class="header-anchor">#</a> 实现</h2> <h3 id="redux-store-js"><a href="#redux-store-js" class="header-anchor">#</a> <a href=""></a><a href=""></a>redux/store.js</h3> <blockquote><p>该文件专门用于暴露一个store对象，整个应用只有一个store对象</p></blockquote> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token operator">/</span> 引入createStore，专门用于创建redux中最为核心的store对象
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;redux&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 引入为Count组件服务的reducer</span>
<span class="token keyword">import</span> countReducer <span class="token keyword">from</span> <span class="token string">&quot;./count_reducer.js&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 暴露store</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span>countReducer<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="redux-count-reducer-js"><a href="#redux-count-reducer-js" class="header-anchor">#</a> redux/count_reducer.js</h3> <p>该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数<br>
reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token constant">INCREMENT</span><span class="token punctuation">,</span><span class="token constant">DECREMENT</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constant'</span>

<span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token number">0</span> <span class="token comment">//初始化状态</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">countReducer</span><span class="token punctuation">(</span><span class="token parameter">preState<span class="token operator">=</span>initState<span class="token punctuation">,</span>action</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token comment">// console.log(preState);</span>
  <span class="token comment">//从action对象中获取：type、data</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span>type<span class="token punctuation">,</span>data<span class="token punctuation">}</span> <span class="token operator">=</span> action
  <span class="token comment">//根据type决定如何加工数据</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token constant">INCREMENT</span><span class="token operator">:</span> <span class="token comment">//如果是加</span>
      <span class="token keyword">return</span> preState <span class="token operator">+</span> data
    <span class="token keyword">case</span> <span class="token constant">DECREMENT</span><span class="token operator">:</span> <span class="token comment">//若果是减</span>
      <span class="token keyword">return</span> preState <span class="token operator">-</span> data
    <span class="token keyword">default</span><span class="token operator">:</span>
      <span class="token keyword">return</span> preState
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="redux-count-action-js"><a href="#redux-count-action-js" class="header-anchor">#</a> redux/count_action.js</h3> <p>该文件专门为Count组件生成action对象</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token constant">INCREMENT</span><span class="token punctuation">,</span><span class="token constant">DECREMENT</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constant'</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createIncrementAction</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span><span class="token constant">INCREMENT</span><span class="token punctuation">,</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createDecrementAction</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span><span class="token constant">DECREMENT</span><span class="token punctuation">,</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="redux-constant-js"><a href="#redux-constant-js" class="header-anchor">#</a> redux/constant.js</h3> <blockquote><p>该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
<code>export const INCREMENT = 'increment' export const DECREMENT = 'decrement'</code></p></blockquote> <h3 id="count-index-jsx"><a href="#count-index-jsx" class="header-anchor">#</a> Count/index.jsx</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token comment">//引入store，用于获取redux中保存状态</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../../redux/store'</span>
<span class="token comment">//引入actionCreator，专门用于创建action对象</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>createIncrementAction<span class="token punctuation">,</span>createDecrementAction<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../redux/count_action'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Count</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>

  <span class="token comment">/* componentDidMount(){
    //检测redux中状态的变化，只要变化，就调用render
    store.subscribe(()=&gt;{
      this.setState({})
    })
  } */</span>

  <span class="token comment">//加法</span>
  <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">createIncrementAction</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//减法</span>
  <span class="token function-variable function">decrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">createDecrementAction</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//奇数再加</span>
  <span class="token function-variable function">incrementIfOdd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">const</span> count <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>count <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">createIncrementAction</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//异步加</span>
  <span class="token function-variable function">incrementAsync</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">createIncrementAction</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">500</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为：</span><span class="token punctuation">{</span>store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber <span class="token operator">=</span> c<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increment<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">+</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>decrement<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">-</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>incrementIfOdd<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为奇数再加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>incrementAsync<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">异步加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br></div></div><h3 id="index-js-2"><a href="#index-js-2" class="header-anchor">#</a> index.js</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./redux/store'</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// 监测redux中状态的改变，如redux的状态发生了改变，那么重新渲染App组件</span>
store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>总结</p> <h3 id="store-js"><a href="#store-js" class="header-anchor">#</a> store.js：</h3> <p>1). 引入redux中的createStore函数，创建一个store
2). createStore调用时要传入一个为其服务的reducer
3). 记得暴露store对象</p> <h4 id="count-reducer-js"><a href="#count-reducer-js" class="header-anchor">#</a> count_reducer.js：</h4> <ul><li>reducer的本质是一个函数，接收：preState,action，返回加工后的状态</li> <li>reducer有两个作用：初始化状态，加工状态</li> <li>reducer被第一次调用时，是store自动触发的，</li> <li>传递的preState是undefined,</li> <li>传递的action是:{type:'@@REDUX/INIT_a.2.b.4}</li> <li>在index.js中监测store中状态的改变，一旦发生改变重新渲染<App></App></li> <li>备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。</li></ul> <p>完整版新增文件：</p> <ul><li>count_action.js 专门用于创建action对象</li> <li>constant.js 放置容易写错的type值</li></ul> <h1 id="redux异步编程"><a href="#redux异步编程" class="header-anchor">#</a> redux异步编程</h1> <h2 id="理解-6"><a href="#理解-6" class="header-anchor">#</a> 理解</h2> <ol><li>redux默认是不能进行异步处理的,</li> <li>某些时候应用中需要在redux中执行异步任务(ajax, 定时器)</li></ol> <h2 id="使用异步中间件"><a href="#使用异步中间件" class="header-anchor">#</a> 使用异步中间件</h2> <p><code>npm install redux-thunk</code></p> <h3 id="count-action-js"><a href="#count-action-js" class="header-anchor">#</a> count_action.js</h3> <p>该模块专门为Count组件生成action对象
异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span><span class="token constant">INCREMENT</span><span class="token punctuation">,</span><span class="token constant">DECREMENT</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./constant'</span>

<span class="token comment">//同步action，就是指action的值为Object类型的一般对象</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createIncrementAction</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span><span class="token constant">INCREMENT</span><span class="token punctuation">,</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createDecrementAction</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">type</span><span class="token operator">:</span><span class="token constant">DECREMENT</span><span class="token punctuation">,</span>data<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">createIncrementAsyncAction</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>time</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
	<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">dispatch</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
		<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
			<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">createIncrementAction</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>time<span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="store-js-2"><a href="#store-js-2" class="header-anchor">#</a> store.js</h3> <blockquote><p>该模块专门用于暴露一个store对象，整个应用只有一个store对象</p></blockquote> <p>在这里引入中间件</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//引入createStore，专门用于创建redux中最为核心的store对象</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">,</span>applyMiddleware<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span>
<span class="token comment">//引入为Count组件服务的reducer</span>
<span class="token keyword">import</span> countReducer <span class="token keyword">from</span> <span class="token string">'./count_reducer'</span>
<span class="token comment">//引入redux-thunk，用于支持异步action</span>
<span class="token keyword">import</span> thunk <span class="token keyword">from</span> <span class="token string">'redux-thunk'</span>
<span class="token comment">//暴露store</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span>countReducer<span class="token punctuation">,</span><span class="token function">applyMiddleware</span><span class="token punctuation">(</span>thunk<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>总结</p> <ol><li>明确：延迟的动作不想交给组件自身，想交给action</li> <li>何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。</li> <li>具体编码：</li> <li>npm install redux-thunk，并配置在store中</li> <li>创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。</li> <li>异步任务有结果后，分发一个同步的action去真正操作数据。</li> <li>备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。</li></ol> <h1 id="react-redux"><a href="#react-redux" class="header-anchor">#</a> <a href="https://so.csdn.net/so/search?from=pc_blog_highlight&amp;q=react" target="_blank" rel="noopener noreferrer">react<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>-<a href="https://so.csdn.net/so/search?from=pc_blog_highlight&amp;q=redux" target="_blank" rel="noopener noreferrer">redux<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></h1> <h2 id="理解-7"><a href="#理解-7" class="header-anchor">#</a> 理解</h2> <ol><li>一个React插件库</li> <li>专门用来简化React应用中使用redux</li></ol> <h2 id="react-redux将所有组件分成两大类"><a href="#react-redux将所有组件分成两大类" class="header-anchor">#</a> <a href="https://so.csdn.net/so/search?from=pc_blog_highlight&amp;q=react" target="_blank" rel="noopener noreferrer">react<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>-<a href="https://so.csdn.net/so/search?from=pc_blog_highlight&amp;q=redux" target="_blank" rel="noopener noreferrer">redux<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>将所有组件分成两大类</h2> <p><strong>UI组件</strong>
1.
2. 只负责 UI 的呈现，不带有任何业务逻辑
3. 通过props接收数据(一般数据和函数)
4. 不使用任何 Redux 的 API
5. 一般保存在components文件夹下
<strong>容器组件</strong></p> <ol><li>负责管理数据和业务逻辑，不负责UI的呈现</li> <li>使用 Redux 的 API</li> <li>一般保存在containers文件夹下</li></ol> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca8e866ec5f14a8cb8eedeaaaca70199~tplv-k3u1fbpfcp-watermark.image?" alt="20210617234345767.png">
相关API</p> <ul><li><code>Provider</code>：让所有组件都可以得到state数据</li> <li><code>connect</code>：用于包装 UI 组件生成容器组件</li> <li><code>mapStateToprops</code>：将外部的数据（即state对象）转换为UI组件的标签属性</li> <li><code>mapDispatchToProps</code>：将分发action的函数转换为UI组件的标签属性</li></ul> <h2 id="基本使用"><a href="#基本使用" class="header-anchor">#</a> 基本使用</h2> <h3 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h3> <p><code>npm install react-redux</code></p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40f895884c754b819092aa55215947ca~tplv-k3u1fbpfcp-watermark.image?" alt="20210618095304942.png"></p> <h3 id="components-count-index-jsx"><a href="#components-count-index-jsx" class="header-anchor">#</a> components/Count/index.jsx</h3> <p><strong>UI组件</strong></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Count</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token comment">//加法</span>
  <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jia</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//减法</span>
  <span class="token function-variable function">decrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jian</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//奇数再加</span>
  <span class="token function-variable function">incrementIfOdd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jia</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//异步加</span>
  <span class="token function-variable function">incrementAsync</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jiaAsync</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">500</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//console.log('UI组件接收到的props是',this.props);</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为：</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber <span class="token operator">=</span> c<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increment<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">+</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>decrement<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">-</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>incrementIfOdd<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为奇数再加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>incrementAsync<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">异步加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br></div></div><h3 id="containers-count-index-jsx"><a href="#containers-count-index-jsx" class="header-anchor">#</a> containers/Count/index.jsx</h3> <p><strong>容器组件</strong></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">//引入Count的UI组件</span>
<span class="token keyword">import</span> CountUI <span class="token keyword">from</span> <span class="token string">'../../components/Count'</span>
<span class="token comment">//引入action</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  createIncrementAction<span class="token punctuation">,</span>
  createDecrementAction<span class="token punctuation">,</span>
  createIncrementAsyncAction
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../redux/count_action'</span>

<span class="token comment">//引入connect用于连接UI组件与redux</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>connect<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>

<span class="token comment">/* 
  1.mapStateToProps函数返回的是一个对象；
  2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
  3.mapStateToProps用于传递状态
*/</span>
<span class="token keyword">function</span> <span class="token function">mapStateToProps</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 
  1.mapDispatchToProps函数返回的是一个对象；
  2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
  3.mapDispatchToProps用于传递操作状态的方法
*/</span>
<span class="token keyword">function</span> <span class="token function">mapDispatchToProps</span><span class="token punctuation">(</span><span class="token parameter">dispatch</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">jia</span><span class="token operator">:</span><span class="token parameter">number</span> <span class="token operator">=&gt;</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">createIncrementAction</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function-variable function">jian</span><span class="token operator">:</span><span class="token parameter">number</span> <span class="token operator">=&gt;</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">createDecrementAction</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function-variable function">jiaAsync</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">number<span class="token punctuation">,</span>time</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">createIncrementAsyncAction</span><span class="token punctuation">(</span>number<span class="token punctuation">,</span>time<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">//使用connect()()创建并暴露一个Count的容器组件</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapStateToProps<span class="token punctuation">,</span>mapDispatchToProps<span class="token punctuation">)</span><span class="token punctuation">(</span>CountUI<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><h3 id="app-jsx"><a href="#app-jsx" class="header-anchor">#</a> App.jsx</h3> <p><strong>给容器组件传递store</strong></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> Count <span class="token keyword">from</span> <span class="token string">'./containers/Count'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./redux/store'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token comment">/* 给容器组件传递store */</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Count</span></span> <span class="token attr-name">store</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>store<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>总结
明确两个概念：</p> <ul><li>UI组件:不能使用任何 redux 的api，只负责页面的呈现、交互等。</li> <li>容器组件：负责和 redux 通信，将结果交给UI组件。</li> <li>如何创建一个容器组件————靠 react-redux 的 connect 函数</li> <li>connect(mapStateToProps,mapDispatchToProps)(UI组件)
<ul><li>mapStateToProps: 映射状态，返回值是一个对象</li> <li>mapDispatchToProps: 映射操作状态的方法，返回值是一个对象</li></ul></li> <li>备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入</li> <li>备注2：mapDispatchToProps，也可以是一个对象【优化1】</li></ul> <h2 id="优化"><a href="#优化" class="header-anchor">#</a> 优化</h2> <h3 id="优化1-简写mapdispatchtoprops"><a href="#优化1-简写mapdispatchtoprops" class="header-anchor">#</a> 优化1 简写<code>mapDispatchToProps</code></h3> <p>//使用connect()()创建并暴露一个Count的容器组件</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>
  <span class="token parameter">state</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

  <span class="token comment">//mapDispatchToProps的一般写法</span>
  <span class="token comment">/* dispatch =&gt; ({
    jia:number =&gt; dispatch(createIncrementAction(number)),
    jian:number =&gt; dispatch(createDecrementAction(number)),
    jiaAsync:(number,time) =&gt; dispatch(createIncrementAsyncAction(number,time)),
  }) */</span>

  <span class="token comment">//mapDispatchToProps的简写</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">jia</span><span class="token operator">:</span>createIncrementAction<span class="token punctuation">,</span>
    <span class="token literal-property property">jian</span><span class="token operator">:</span>createDecrementAction<span class="token punctuation">,</span>
    <span class="token literal-property property">jiaAsync</span><span class="token operator">:</span>createIncrementAsyncAction<span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">(</span>CountUI<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>**容器组件可以检测redux中的状态改变，并渲染页面，所以不需要在index.js中检测了
不要在App.jsx中给子组件传递store了
**</p> <h4 id="index-js-3"><a href="#index-js-3" class="header-anchor">#</a> index.js</h4> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./redux/store'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Provider<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Provider</span></span> <span class="token attr-name">store</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>store<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
		</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">,</span>
	document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="优化3-整合ui组件和容器组件"><a href="#优化3-整合ui组件和容器组件" class="header-anchor">#</a> 优化3 整合UI组件和容器组件</h3> <p>每个组件两个文件夹太麻烦了，直接整合在一起就好了~</p> <h4 id="containers-count-index-jsx-2"><a href="#containers-count-index-jsx-2" class="header-anchor">#</a> <a href=""></a>containers/Count/index.jsx</h4> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token comment">//引入action</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  createIncrementAction<span class="token punctuation">,</span>
  createDecrementAction<span class="token punctuation">,</span>
  createIncrementAsyncAction
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../redux/count_action'</span>
<span class="token comment">//引入connect用于连接UI组件与redux</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>connect<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>

<span class="token comment">//定义UI组件</span>
<span class="token keyword">class</span> <span class="token class-name">Count</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>

  state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">carName</span><span class="token operator">:</span><span class="token string">'奔驰c63'</span><span class="token punctuation">}</span>

  <span class="token comment">//加法</span>
  <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jia</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//减法</span>
  <span class="token function-variable function">decrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jian</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//奇数再加</span>
  <span class="token function-variable function">incrementIfOdd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jia</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//异步加</span>
  <span class="token function-variable function">incrementAsync</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">jiaAsync</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">500</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//console.log('UI组件接收到的props是',this.props);</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为：</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber <span class="token operator">=</span> c<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increment<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">+</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>decrement<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">-</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>incrementIfOdd<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为奇数再加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>incrementAsync<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">异步加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br></div></div><p>使用connect()()创建并暴露一个Count的容器组件</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>
  <span class="token parameter">state</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

  <span class="token comment">//mapDispatchToProps的一般写法</span>
  <span class="token comment">/* dispatch =&gt; ({
    jia:number =&gt; dispatch(createIncrementAction(number)),
    jian:number =&gt; dispatch(createDecrementAction(number)),
    jiaAsync:(number,time) =&gt; dispatch(createIncrementAsyncAction(number,time)),
  }) */</span>

  <span class="token comment">//mapDispatchToProps的简写</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">jia</span><span class="token operator">:</span>createIncrementAction<span class="token punctuation">,</span>
    <span class="token literal-property property">jian</span><span class="token operator">:</span>createDecrementAction<span class="token punctuation">,</span>
    <span class="token literal-property property">jiaAsync</span><span class="token operator">:</span>createIncrementAsyncAction<span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">(</span>Count<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>总结</p> <ul><li>容器组件和UI组件整合一个文件</li> <li>无需自己给容器组件传递store，给<App></App>包裹一个<code>&lt;Provider store={store}&gt;</code>即可。</li> <li>使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。</li> <li>mapDispatchToProps也可以简单的写成一个对象</li> <li>一个组件要和redux“打交道”要经过哪几步？</li> <li>定义好UI组件—不暴露</li> <li>引入connect生成一个容器组件，并暴露，写法如下：</li></ul> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token function">connect</span><span class="token punctuation">(</span>
	<span class="token parameter">state</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span>value<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//映射状态</span>
	<span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span>xxxxxAction<span class="token punctuation">}</span> <span class="token comment">//映射操作状态的方法</span>
<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token constant">UI</span>组件<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="3"><li>在UI组件中通过this.props.xxxxxxx读取和操作状态</li></ol> <h3 id="store-js-3"><a href="#store-js-3" class="header-anchor">#</a> store.js</h3> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/</span>

<span class="token comment">//引入createStore，专门用于创建redux中最为核心的store对象</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStore<span class="token punctuation">,</span> applyMiddleware<span class="token punctuation">,</span> combineReducers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;redux&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//引入为Count组件服务的reducer</span>
<span class="token keyword">import</span> countReducer <span class="token keyword">from</span> <span class="token string">&quot;./reducers/count&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//引入为Count组件服务的reducer</span>
<span class="token keyword">import</span> personReducer <span class="token keyword">from</span> <span class="token string">&quot;./reducers/person&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//引入redux-thunk，用于支持异步action</span>
<span class="token keyword">import</span> thunk <span class="token keyword">from</span> <span class="token string">&quot;redux-thunk&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 汇总所有的reducer变为一个总的reducer</span>
<span class="token keyword">const</span> allReducer <span class="token operator">=</span> <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">he</span><span class="token operator">:</span> countReducer<span class="token punctuation">,</span>
  <span class="token literal-property property">rens</span><span class="token operator">:</span> personReducer<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//暴露store</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span>allReducer<span class="token punctuation">,</span> <span class="token function">applyMiddleware</span><span class="token punctuation">(</span>thunk<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>总结</p> <ol><li>定义一个Pserson组件，和Count组件通过redux共享数据。</li> <li>为Person组件编写：reducer、action，配置constant常量。</li> <li>重点：Person的reducer和Count的reducer要使用combineReducers进行合并，合并后的总状态是一个对象！！！</li> <li>交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。
纯函数和高阶函数
reducer要求是一个纯函数，所以操作数组的时候，不能用push之类的方法</li></ol> <h3 id="纯函数"><a href="#纯函数" class="header-anchor">#</a> 纯函数</h3> <ol><li>一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)</li> <li>必须遵守以下一些约束</li> <li>不得改写参数数据</li> <li>不会产生任何副作用，例如网络请求，输入和输出设备</li> <li>不能调用Date.now()或者Math.random()等不纯的方法</li> <li>redux的reducer函数必须是一个纯函数
<strong>高阶函数</strong></li> <li>理解: 一类特别的函数</li> <li>情况1: 参数是函数</li> <li>情况2: 返回是函数</li> <li>常见的高阶函数:</li> <li>定时器设置函数</li> <li>数组的forEach()/map()/filter()/reduce()/find()/bind()</li> <li>promise</li> <li>react-redux中的connect函数</li> <li>作用: 能实现更加动态, 更加可扩展的功能</li></ol> <h1 id="最终版"><a href="#最终版" class="header-anchor">#</a> 最终版</h1> <ol><li>所有变量名字要规范，尽量触发对象的简写形式。</li> <li>reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer</li></ol> <p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e727339974f47b5afa6da56660ea426~tplv-k3u1fbpfcp-watermark.image?" alt="202106181534064.png"></p> <h2 id="containers-count-index-jsx-3"><a href="#containers-count-index-jsx-3" class="header-anchor">#</a> containers/Count/index.jsx</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token comment">//引入action</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  increment<span class="token punctuation">,</span>
  decrement<span class="token punctuation">,</span>
  incrementAsync
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../redux/actions/count'</span>
<span class="token comment">//引入connect用于连接UI组件与redux</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>connect<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>

<span class="token comment">//定义UI组件</span>
<span class="token keyword">class</span> <span class="token class-name">Count</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>

  <span class="token comment">//加法</span>
  <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//减法</span>
  <span class="token function-variable function">decrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">decrement</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//奇数再加</span>
  <span class="token function-variable function">incrementIfOdd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">increment</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//异步加</span>
  <span class="token function-variable function">incrementAsync</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>value<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">incrementAsync</span><span class="token punctuation">(</span>value<span class="token operator">*</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">500</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//console.log('UI组件接收到的props是',this.props);</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是Count组件,下方组件总人数为:</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>renshu<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为：</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectNumber <span class="token operator">=</span> c<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increment<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">+</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>decrement<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">-</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>incrementIfOdd<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为奇数再加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>incrementAsync<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">异步加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">&amp;nbsp;
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">//使用connect()()创建并暴露一个Count的容器组件</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>
  <span class="token parameter">state</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">.</span>count<span class="token punctuation">,</span>
    <span class="token literal-property property">personCount</span><span class="token operator">:</span>state<span class="token punctuation">.</span>persons<span class="token punctuation">.</span>length
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>increment<span class="token punctuation">,</span>decrement<span class="token punctuation">,</span>incrementAsync<span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">(</span>Count<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><h2 id="containers-person-index-jsx"><a href="#containers-person-index-jsx" class="header-anchor">#</a> containers/Person/index.jsx</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>nanoid<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'nanoid'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>connect<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>addPerson<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../redux/actions/person'</span>

<span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>

  <span class="token function-variable function">addPerson</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nameNode<span class="token punctuation">.</span>value
    <span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ageNode<span class="token punctuation">.</span>value<span class="token operator">*</span><span class="token number">1</span>
    <span class="token keyword">const</span> personObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token function">nanoid</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>name<span class="token punctuation">,</span>age<span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">addPerson</span><span class="token punctuation">(</span>personObj<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>nameNode<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">''</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>ageNode<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">''</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是Person组件,上方组件求和为</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span><span class="token operator">=&gt;</span><span class="token keyword">this</span><span class="token punctuation">.</span>nameNode <span class="token operator">=</span> c<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>输入名字<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">c</span><span class="token operator">=&gt;</span><span class="token keyword">this</span><span class="token punctuation">.</span>ageNode <span class="token operator">=</span> c<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>输入年龄<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>addPerson<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">添加</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>persons<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
              <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>p<span class="token punctuation">.</span>id<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span>p<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token plain-text">--</span><span class="token punctuation">{</span>p<span class="token punctuation">.</span>age<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>
  <span class="token parameter">state</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">persons</span><span class="token operator">:</span>state<span class="token punctuation">.</span>persons<span class="token punctuation">,</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span>state<span class="token punctuation">.</span>count
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">//映射状态</span>
  <span class="token punctuation">{</span>addPerson<span class="token punctuation">}</span><span class="token comment">//映射操作状态的方法</span>
<span class="token punctuation">)</span><span class="token punctuation">(</span>Person<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><h2 id="redux-actions-count-js"><a href="#redux-actions-count-js" class="header-anchor">#</a> redux/actions/count.js</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">/* 
  该文件专门为Count组件生成action对象
*/</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">INCREMENT</span><span class="token punctuation">,</span> <span class="token constant">DECREMENT</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../constant&quot;</span><span class="token punctuation">;</span>

<span class="token comment">//同步action，就是指action的值为Object类型的一般对象</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">INCREMENT</span><span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">decrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">DECREMENT</span><span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">incrementAsync</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> time</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">dispatch</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">increment</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> time<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="redux-action-person-js"><a href="#redux-action-person-js" class="header-anchor">#</a> redux/action/person.js</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">ADD_PERSON</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../constant&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//创建增加一个人的action动作对象</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">addPerson</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">personObj</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token constant">ADD_PERSON</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> personObj <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="redux-reducers-count-js"><a href="#redux-reducers-count-js" class="header-anchor">#</a> redux/reducers/count.js</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">/* 
  1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
  2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">INCREMENT</span><span class="token punctuation">,</span> <span class="token constant">DECREMENT</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../constant&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">//初始化状态</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">countReducer</span><span class="token punctuation">(</span><span class="token parameter">preState <span class="token operator">=</span> initState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// console.log('countReducer@#@#@#');</span>
  <span class="token comment">//从action对象中获取：type、data</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> action<span class="token punctuation">;</span>
  <span class="token comment">//根据type决定如何加工数据</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token constant">INCREMENT</span><span class="token operator">:</span> <span class="token comment">//如果是加</span>
      <span class="token keyword">return</span> preState <span class="token operator">+</span> data<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token constant">DECREMENT</span><span class="token operator">:</span> <span class="token comment">//若果是减</span>
      <span class="token keyword">return</span> preState <span class="token operator">-</span> data<span class="token punctuation">;</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
      <span class="token keyword">return</span> preState<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h2 id="redux-reducers-person-js"><a href="#redux-reducers-person-js" class="header-anchor">#</a> redux/reducers/person.js</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">ADD_PERSON</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../constant&quot;</span><span class="token punctuation">;</span>

<span class="token comment">//初始化人的列表</span>
<span class="token keyword">const</span> initState <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&quot;001&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;tom&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">personReducer</span><span class="token punctuation">(</span><span class="token parameter">preState <span class="token operator">=</span> initState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> action<span class="token punctuation">;</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token constant">ADD_PERSON</span><span class="token operator">:</span> <span class="token comment">//若是添加一个人</span>
      <span class="token comment">//preState.unshift(data) //此处不可以这样写，这样会导致preState被改写了，personReducer就不是纯函数了。</span>
      <span class="token keyword">return</span> <span class="token punctuation">[</span>data<span class="token punctuation">,</span> <span class="token operator">...</span>preState<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
      <span class="token keyword">return</span> preState<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="redux-reducers-index-js"><a href="#redux-reducers-index-js" class="header-anchor">#</a> redux/reducers/index.js</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">/* 
	该文件用于汇总所有的reducer为一个总的reducer
*/</span>
<span class="token comment">//引入combineReducers，用于汇总多个reducer</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> combineReducers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;redux&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//引入为Count组件服务的reducer</span>
<span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">&quot;./count&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//引入为Person组件服务的reducer</span>
<span class="token keyword">import</span> persons <span class="token keyword">from</span> <span class="token string">&quot;./person&quot;</span><span class="token punctuation">;</span>

<span class="token comment">//汇总所有的reducer变为一个总的reducer</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  count<span class="token punctuation">,</span>
  persons<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="redux-constant-js-2"><a href="#redux-constant-js-2" class="header-anchor">#</a> redux/constant.js</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">/* 
	该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">INCREMENT</span> <span class="token operator">=</span> <span class="token string">&quot;increment&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">DECREMENT</span> <span class="token operator">=</span> <span class="token string">&quot;decrement&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">ADD_PERSON</span> <span class="token operator">=</span> <span class="token string">&quot;add_person&quot;</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="redux-store-js-2"><a href="#redux-store-js-2" class="header-anchor">#</a> redux/store.js</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/</span>
<span class="token comment">//引入createStore，专门用于创建redux中最为核心的store对象</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStore<span class="token punctuation">,</span> applyMiddleware <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;redux&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//引入汇总之后的reducer</span>
<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">&quot;./reducers&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//引入redux-thunk，用于支持异步action</span>
<span class="token keyword">import</span> thunk <span class="token keyword">from</span> <span class="token string">&quot;redux-thunk&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//引入redux-devtools-extension</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> composeWithDevTools <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;redux-devtools-extension&quot;</span><span class="token punctuation">;</span>

<span class="token comment">//暴露store</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createStore</span><span class="token punctuation">(</span>
  reducer<span class="token punctuation">,</span>
  <span class="token function">composeWithDevTools</span><span class="token punctuation">(</span><span class="token function">applyMiddleware</span><span class="token punctuation">(</span>thunk<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="app-jsx-2"><a href="#app-jsx-2" class="header-anchor">#</a> App.jsx</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> Count <span class="token keyword">from</span> <span class="token string">'./containers/Count'</span> <span class="token comment">//引入的Count的容器组件</span>
<span class="token keyword">import</span> Person <span class="token keyword">from</span> <span class="token string">'./containers/Person'</span> <span class="token comment">//引入的Person的容器组件</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Count</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Person</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="index-js-4"><a href="#index-js-4" class="header-anchor">#</a> index.js</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">&quot;react&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">&quot;react-dom&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">&quot;./App&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">&quot;./redux/store&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react-redux&quot;</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token comment">/* 此处需要用Provider包裹App，目的是让App所有的后代容器组件都能接收到store */</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Provider</span></span> <span class="token attr-name">store</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>store<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">,</span>
  document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;root&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h1 id="【react】拓展"><a href="#【react】拓展" class="header-anchor">#</a> 【React】拓展</h1> <ol><li>setState</li> <li>路由组件懒加载</li> <li>Hooks</li> <li>Context</li> <li>PureComponent</li> <li>插槽</li> <li>错误边界</li> <li>组件通信方式</li> <li>setState</li></ol> <h2 id="setstate"><a href="#setstate" class="header-anchor">#</a> setState</h2> <p><code>setState</code>更新状态其实有两种写法<br>
setState这个方法在调用的时候是同步的，但是引起<a href="https://so.csdn.net/so/search?from=pc_blog_highlight&amp;q=React" target="_blank" rel="noopener noreferrer">React<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的状态更新是异步的<br>
【React状态更新是异步的】</p> <h2 id="对象式"><a href="#对象式" class="header-anchor">#</a> 对象式</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>setState(stateChange, [callback])
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol><li><code>stateChange</code>为状态改变<strong>对象</strong> (该对象可以体现出状态的更改)</li> <li><code>callback</code>是可选的<strong>回调函数</strong>, 它在状态更新完毕、界面也更新后(<code>render</code>调用后)才被调用【异步更新后调用，可以拿到更新后的状态的值】
之前一直写的，就是直接传一个对象</li></ol> <div class="language- line-numbers-mode"><pre class="language-text"><code>this.setState({ count: this.state.count+1 })
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="函数式"><a href="#函数式" class="header-anchor">#</a> 函数式</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>setState(updater, [callback])
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol><li><code>updater</code>为返回<code>stateChange</code>对象的函数【返回值是对象】</li> <li><code>updater</code>可以接收到<code>state</code>和<code>props</code></li> <li><code>callback</code>是可选的回调函数, 它在状态更新、界面也更新后(<code>render</code>调用后)才被调用【和对象式是一样的】</li></ol> <p>传的时候回调函数，可以接收到state和props，函数的返回值是设置状态的对象</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>setState(state =&gt; ({count: state.count+1})) 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>总结</p> <ul><li>对象式的setState是函数式的setState的简写方式【语法糖】</li> <li>使用原则</li> <li>如果新状态不依赖于原状态【使用对象方式】</li> <li>如果新状态依赖于原状态 【使用函数方式】</li> <li>如果需要在setState()执行后，获取最新的状态数据，可以在第二个callback函数中读取到异步更新的最新值</li></ul> <h1 id="路由组件的懒加载-lazyload"><a href="#路由组件的懒加载-lazyload" class="header-anchor">#</a> 路由组件的懒加载 lazyLoad</h1> <p>用的时候才加载，一般是路由组件进行懒加载</p> <p>如果不用路由懒加载，页面在第一次进入的时候，就请求了所有组件的数据，如果组件过多，过多的请求这就没有必要了，应该是用户按哪个链接再请求哪个组件</p> <p>通过React的lazy函数配合import()函数动态加载路由组件【路由组件代码会被分开打包】</p> <p>通过<code>&lt;Suspense&gt;</code>指定在加载得到路由打包文件前显示一个自定义loading界</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> lazy<span class="token punctuation">,</span> Suspense<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>NavLink<span class="token punctuation">,</span>Route<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>

<span class="token comment">// import Home from './Home'</span>
<span class="token comment">// import About from './About'</span>

<span class="token keyword">import</span> Loading <span class="token keyword">from</span> <span class="token string">'./Loading'</span>
<span class="token keyword">const</span> Home <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./Home'</span><span class="token punctuation">)</span> <span class="token punctuation">)</span>
<span class="token keyword">const</span> About <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./About'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-xs-offset-2 col-xs-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page-header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">React Router Demo</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-xs-2 col-xs-offset-2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
              </span><span class="token punctuation">{</span><span class="token comment">/* 在React中靠路由链接实现切换组件--编写路由链接 */</span><span class="token punctuation">}</span><span class="token plain-text">
              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavLink</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">About</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavLink</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavLink</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-group-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Home</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavLink</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>col-xs-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>panel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>panel-body<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Suspense</span></span> <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Loading</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                  </span><span class="token punctuation">{</span><span class="token comment">/* 注册路由 */</span><span class="token punctuation">}</span><span class="token plain-text">
                  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>About<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
                  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Suspense</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><h1 id="hooks"><a href="#hooks" class="header-anchor">#</a> Hooks</h1> <p>React Hook/Hooks是什么?
Hook 是 React 16.8 的新增特性。
它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。【函数式组件】</p> <p><strong>三个常用的Hook</strong></p> <ol><li>State Hook: React.useState()</li> <li>Effect Hook: React.useEffect()</li> <li>Ref Hook: React.useRef()
<strong>State Hook</strong></li></ol> <p>State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
语法: const [xxx, setXxx] = React.useState(initValue)</p> <p>useState()说明:
参数: 第一次初始化指定的值在内部作缓存
返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数</p> <p><strong>setXxx()2种写法:</strong></p> <p>setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
setXxx(value =&gt; newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值</p> <p><strong>Effect Hook</strong></p> <p>Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)</p> <p><code>React中的副作用操作:</code></p> <ul><li>发ajax请求数据获取</li> <li>设置订阅 / 启动定时器</li> <li>手动更改真实DOM</li></ul> <p>语法和说明:</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> 
  <span class="token comment">// 在此可以执行任何带副作用操作【挂载+更新】</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token comment">// 在组件卸载前执行</span>
    <span class="token comment">// 在此做一些收尾工作, 比如清除定时器/取消订阅等【卸载前】</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>stateValue<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 如果指定的是[], 回调函数只会在第一次render()后执行</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>可以把 useEffect Hook 看做如下三个函数的组合</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">componentDidUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Ref Hook
Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
语法: const refContainer = useRef()
作用:保存标签对象,功能与React.createRef()一样
代码示例</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span>

<span class="token comment">//类式组件</span>
<span class="token comment">/* class Demo extends React.Component {

  state = {count:0}

  myRef = React.createRef()

  add = ()=&gt;{
    this.setState(state =&gt; ({count:state.count+1}))
  }

  unmount = ()=&gt;{
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  show = ()=&gt;{
    alert(this.myRef.current.value)
  }

  componentDidMount(){
    this.timer = setInterval(()=&gt;{
      this.setState( state =&gt; ({count:state.count+1}))
    },1000)
  }

  componentWillUnmount(){
    clearInterval(this.timer)
  }

  render() {
    return (
      &lt;div&gt;
        &lt;input type=&quot;text&quot; ref={this.myRef}/&gt;
        &lt;h2&gt;当前求和为{this.state.count}&lt;/h2&gt;
        &lt;button onClick={this.add}&gt;点我+1&lt;/button&gt;
        &lt;button onClick={this.unmount}&gt;卸载组件&lt;/button&gt;
        &lt;button onClick={this.show}&gt;点击提示数据&lt;/button&gt;
      &lt;/div&gt;
    )
  }
} */</span>

<span class="token keyword">function</span> <span class="token function">Demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token comment">//console.log('Demo');</span>

  <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span>setCount<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> myRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

  React<span class="token punctuation">.</span><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> timer <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      <span class="token function">setCount</span><span class="token punctuation">(</span><span class="token parameter">count</span> <span class="token operator">=&gt;</span> count<span class="token operator">+</span><span class="token number">1</span> <span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      <span class="token function">clearInterval</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

  <span class="token comment">//加的回调</span>
  <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//setCount(count+1) //第一种写法</span>
    <span class="token function">setCount</span><span class="token punctuation">(</span><span class="token parameter">count</span> <span class="token operator">=&gt;</span> count<span class="token operator">+</span><span class="token number">1</span> <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//提示输入的回调</span>
  <span class="token keyword">function</span> <span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span>myRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">//卸载组件的回调</span>
  <span class="token keyword">function</span> <span class="token function">unmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    ReactDOM<span class="token punctuation">.</span><span class="token function">unmountComponentAtNode</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>myRef<span class="token punctuation">}</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前求和为：</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>add<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">点我+1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>unmount<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">卸载组件</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>show<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">点我提示数据</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Demo
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br></div></div><h2 id="fragment"><a href="#fragment" class="header-anchor">#</a> Fragment</h2> <p>文档碎片</p> <h3 id="使用-2"><a href="#使用-2" class="header-anchor">#</a> 使用</h3> <p><code>React中的副作用操作:</code>
或者
<code>&lt;&gt;&lt;/&gt;</code></p> <p>作用
可以不用必须有一个真实的DOM根标签了</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span>Fragment <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Fragment</span></span> <span class="token attr-name">kye</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Fragment</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="context"><a href="#context" class="header-anchor">#</a> Context</h2> <p>上下文</p> <p>理解
一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信</p> <p>使用
创建Context容器对象
const XxxContext = React.createContext()</p> <p>渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>xxxContext.Provider</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>数据<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
	子组件
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>xxxContext.Provider</span><span class="token punctuation">&gt;</span></span>
后代组件读取数据：
<span class="token literal-property property">第一种方式</span><span class="token operator">:</span>仅适用于类组件

<span class="token keyword">static</span> contextType <span class="token operator">=</span> xxxContext  <span class="token comment">// 声明接收context</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>context <span class="token comment">// 读取context中的value数据</span>

<span class="token literal-property property">第二种方式</span><span class="token operator">:</span> 函数组件与类组件都可以

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>xxxContext.Consumer</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token punctuation">{</span>
    <span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span> <span class="token comment">// value就是context中的value数据</span>
      要显示的内容
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>xxxContext.Consumer</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>注意
在应用开发中一般不用context, 一般都用它来封装react插件</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token string">'./index.css'</span>

<span class="token operator">!</span><span class="token punctuation">[</span><span class="token number">20210619182738795</span><span class="token punctuation">.</span>png<span class="token punctuation">]</span><span class="token punctuation">(</span>https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>p6<span class="token operator">-</span>juejin<span class="token punctuation">.</span>byteimg<span class="token punctuation">.</span>com<span class="token operator">/</span>tos<span class="token operator">-</span>cn<span class="token operator">-</span>i<span class="token operator">-</span>k3u1fbpfcp<span class="token operator">/</span>db5591474b6f460dad4b402991f89a21<span class="token operator">~</span>tplv<span class="token operator">-</span>k3u1fbpfcp<span class="token operator">-</span>watermark<span class="token punctuation">.</span>image<span class="token operator">?</span><span class="token punctuation">)</span>
<span class="token comment">//创建Context对象</span>
<span class="token keyword">const</span> MyContext <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> Provider<span class="token punctuation">,</span> Consumer <span class="token punctuation">}</span> <span class="token operator">=</span> MyContext

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">A</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>

  state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">username</span><span class="token operator">:</span><span class="token string">'tom'</span><span class="token punctuation">,</span><span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span><span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>username<span class="token punctuation">,</span>age<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>parent<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是A组件</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我的用户名是:</span><span class="token punctuation">{</span>username<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Provider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>username<span class="token punctuation">,</span>age<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">B</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">B</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是B组件</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">C</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/* class C extends Component {
  //声明接收context
  static contextType = MyContext
  render() {
    const {username,age} = this.context
    return (
      &lt;div className=&quot;grand&quot;&gt;
        &lt;h3&gt;我是C组件&lt;/h3&gt;
        &lt;h4&gt;我从A组件接收到的用户名:{username},年龄是{age}&lt;/h4&gt;
      &lt;/div&gt;
    )
  }
} */</span>

<span class="token keyword">function</span> <span class="token constant">C</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grand<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是C组件</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我从A组件接收到的用户名:
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Consumer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token parameter">value</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token punctuation">.</span>username<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,年龄是</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token punctuation">.</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Consumer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br></div></div><h1 id="组件优化"><a href="#组件优化" class="header-anchor">#</a> 组件优化</h1> <h2 id="component的问题"><a href="#component的问题" class="header-anchor">#</a> Component的问题</h2> <ol><li>只要执行setState(),即使不改变状态数据, 组件也会重新render() ==&gt; 效率低</li> <li>只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==&gt; 效率低</li></ol> <h2 id="效率高的做法"><a href="#效率高的做法" class="header-anchor">#</a> 效率高的做法</h2> <p>只有当组件的state或props数据发生改变时才重新render()</p> <h2 id="原因"><a href="#原因" class="header-anchor">#</a> 原因</h2> <p><code>Component中的shouldComponentUpdate()总是返回true</code></p> <h2 id="解决"><a href="#解决" class="header-anchor">#</a> 解决</h2> <h3 id="办法1-重写shouldcomponentupdate-方法"><a href="#办法1-重写shouldcomponentupdate-方法" class="header-anchor">#</a> <a href=""></a><a href=""></a>办法1: 重写<code>shouldComponentUpdate()</code>方法</h3> <p>比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span><span class="token parameter">nextProps<span class="token punctuation">,</span>nextState</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token comment">// console.log(this.props,this.state); //目前的props和state</span>
  <span class="token comment">// console.log(nextProps,nextState); //接下要变化的目标props，目标state</span>
  <span class="token keyword">return</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carName <span class="token operator">===</span> nextState<span class="token punctuation">.</span>carName
<span class="token punctuation">}</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>办法2: 使用PureComponent
PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true</p> <h1 id="注意-4"><a href="#注意-4" class="header-anchor">#</a> 注意</h1> <blockquote><p><code>只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false不要直接修改state数据, 而是要产生新数据项目中一般使用PureComponent来优化</code></p></blockquote> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> PureComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token string">'./index.css'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Parent</span> <span class="token keyword">extends</span> <span class="token class-name">PureComponent</span> <span class="token punctuation">{</span>

  state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">carName</span><span class="token operator">:</span><span class="token string">&quot;奔驰c36&quot;</span><span class="token punctuation">,</span><span class="token literal-property property">stus</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'小张'</span><span class="token punctuation">,</span><span class="token string">'小李'</span><span class="token punctuation">,</span><span class="token string">'小王'</span><span class="token punctuation">]</span><span class="token punctuation">}</span>

  <span class="token function-variable function">addStu</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token comment">/* const {stus} = this.state
    stus.unshift('小刘')
    this.setState({stus}) */</span>

    <span class="token keyword">const</span> <span class="token punctuation">{</span>stus<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">stus</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'小刘'</span><span class="token punctuation">,</span><span class="token operator">...</span>stus<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token function-variable function">changeCar</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">carName</span><span class="token operator">:</span><span class="token string">'迈巴赫'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token comment">// const obj = this.state</span>
    <span class="token comment">// obj.carName = '迈巴赫'</span>
    <span class="token comment">// console.log(obj === this.state);</span>
    <span class="token comment">// this.setState(obj)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">/* shouldComponentUpdate(nextProps,nextState){
    // console.log(this.props,this.state); //目前的props和state
    // console.log(nextProps,nextState); //接下要变化的目标props，目标state
    return !this.state.carName === nextState.carName
  } */</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Parent---render'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>carName<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>parent<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是Parent组件</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>stus<span class="token punctuation">}</span><span class="token plain-text">&amp;nbsp;
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我的车名字是：</span><span class="token punctuation">{</span>carName<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>changeCar<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">点我换车</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>addStu<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">添加一个小刘</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Child</span></span> <span class="token attr-name">carName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>奥拓<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Child</span> <span class="token keyword">extends</span> <span class="token class-name">PureComponent</span> <span class="token punctuation">{</span>

  <span class="token comment">/* shouldComponentUpdate(nextProps,nextState){
    console.log(this.props,this.state); //目前的props和state
    console.log(nextProps,nextState); //接下要变化的目标props，目标state
    return !this.props.carName === nextProps.carName
  } */</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Child---render'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是Child组件</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我接到的车是：</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>carName<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br></div></div><h1 id="render-props"><a href="#render-props" class="header-anchor">#</a> render props</h1> <h2 id="如何向组件内部动态传入带内容的结构-标签"><a href="#如何向组件内部动态传入带内容的结构-标签" class="header-anchor">#</a> 如何向组件内部动态传入带内容的结构(标签)?</h2> <p>类似于Vue中的插槽</p> <h4 id="vue中"><a href="#vue中" class="header-anchor">#</a> Vue中:</h4> <p>使用slot技术, 也就是通过组件标签体传入结构 <A><B></B></A></p> <h4 id="react中"><a href="#react中" class="header-anchor">#</a> React中:</h4> <ul><li>使用children props: 通过组件标签体传入结构</li> <li>使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性</li></ul> <h2 id="children-props"><a href="#children-props" class="header-anchor">#</a> children props</h2> <p><code>&lt;A&gt; &lt;B&gt;xxxx&lt;/B&gt; &lt;/A&gt;</code> <strong>使用</strong></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h5 id="问题-如果b组件需要a组件内的数据-做不到"><a href="#问题-如果b组件需要a组件内的数据-做不到" class="header-anchor">#</a> 问题: <strong>如果B组件需要A组件内的数据, ==&gt; 做不到</strong></h5> <h2 id="render-props-2"><a href="#render-props-2" class="header-anchor">#</a> render props</h2> <p><code>&lt;A render={(data) =&gt; &lt;C data={data}&gt;&lt;/C&gt;}&gt;&lt;/A&gt;</code></p> <h2 id="使用-3"><a href="#使用-3" class="header-anchor">#</a> 使用</h2> <div class="language- extra-class"><pre><code>A组件: `{this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 `{this.props.data}
</code></pre></div><h1 id="错误边界"><a href="#错误边界" class="header-anchor">#</a> 错误边界</h1> <h2 id="理解-8"><a href="#理解-8" class="header-anchor">#</a> 理解</h2> <blockquote><p>错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面</p></blockquote> <h2 id="特点"><a href="#特点" class="header-anchor">#</a> 特点</h2> <p>只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误</p> <h2 id="使用方式"><a href="#使用方式" class="header-anchor">#</a> 使用方式</h2> <p><code>getDerivedStateFromError配合componentDidCatch</code></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// 生命周期函数，一旦后台组件报错，就会触发</span>
<span class="token keyword">static</span> <span class="token function">getDerivedStateFromError</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 在render之前触发</span>
    <span class="token comment">// 返回新的state</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">hasError</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">componentDidCatch</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> info</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 统计页面的错误。发送请求发送到后台去</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> info<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="示例-3"><a href="#示例-3" class="header-anchor">#</a> 示例</h2> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> Child <span class="token keyword">from</span> <span class="token string">'./Child'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Parent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>

	state <span class="token operator">=</span> <span class="token punctuation">{</span>
		<span class="token literal-property property">hasError</span><span class="token operator">:</span><span class="token string">''</span> <span class="token comment">// 用于标识子组件是否产生错误</span>
	<span class="token punctuation">}</span>

	<span class="token comment">//当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息</span>
	<span class="token keyword">static</span> <span class="token function">getDerivedStateFromError</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'@@@'</span><span class="token punctuation">,</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token literal-property property">hasError</span><span class="token operator">:</span>error<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>

	<span class="token function">componentDidCatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

	<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">return</span> <span class="token punctuation">(</span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
				</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我是Parent组件</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
				</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>hasError <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">当前网络不稳定，稍后再试</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span> <span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Child</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">}</span><span class="token plain-text">
			</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
		<span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h1 id="组件通信方式总结"><a href="#组件通信方式总结" class="header-anchor">#</a> 组件通信方式总结</h1> <h2 id="组件间的关系"><a href="#组件间的关系" class="header-anchor">#</a> 组件间的关系</h2> <ul><li>父子组件</li> <li>兄弟组件（非嵌套组件）</li> <li>祖孙组件（跨级组件）</li></ul> <h2 id="几种通信方式"><a href="#几种通信方式" class="header-anchor">#</a> 几种通信方式</h2> <ol><li>props：
(1).children props
(2).render props</li> <li>消息订阅-发布：
pubs-sub、event等等</li> <li>集中式管理：
redux、dva等等</li> <li>Context:
生产者-消费者模式</li></ol> <h2 id="比较好的搭配方式"><a href="#比较好的搭配方式" class="header-anchor">#</a> 比较好的搭配方式</h2> <ul><li>父子组件：props</li> <li>兄弟组件：消息订阅-发布、集中式管理</li> <li>祖孙组件(跨级组件)：消息订阅-发布、集中式管理、Context(开发用的少，封装插件用的多)</li></ul></div></section> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/3/2022, 8:50:33 AM</span></div></footer> <!----> <div class="comments-wrapper"><!----></div> <ul class="side-bar sub-sidebar-wrapper" style="width:12rem;" data-v-92abcef6><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#介绍" class="sidebar-link reco-side-介绍" data-v-92abcef6>介绍</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#_1-2-原生javascript的缺点" class="sidebar-link reco-side-_1-2-原生javascript的缺点" data-v-92abcef6>1.2 原生JavaScript的缺点</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#【补充】模块化与组件化" class="sidebar-link reco-side-【补充】模块化与组件化" data-v-92abcef6>【补充】模块化与组件化</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#react的特点" class="sidebar-link reco-side-react的特点" data-v-92abcef6>React的特点</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#react高效的原因" class="sidebar-link reco-side-react高效的原因" data-v-92abcef6>React高效的原因</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#使用jsx创建虚拟dom" class="sidebar-link reco-side-使用jsx创建虚拟dom" data-v-92abcef6>使用JSX创建虚拟DOM</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#_3-1-纯js方式-一般不用" class="sidebar-link reco-side-_3-1-纯js方式-一般不用" data-v-92abcef6>3.1 纯JS方式(一般不用)</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#jsx方式" class="sidebar-link reco-side-jsx方式" data-v-92abcef6>JSX方式</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#总结" class="sidebar-link reco-side-总结" data-v-92abcef6>总结</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#函数式组件" class="sidebar-link reco-side-函数式组件" data-v-92abcef6>函数式组件</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#补充】严格模式中的this" class="sidebar-link reco-side-补充】严格模式中的this" data-v-92abcef6>补充】严格模式中的this</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#类式组件" class="sidebar-link reco-side-类式组件" data-v-92abcef6>类式组件</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#【补充】关于es6中类的注意事项" class="sidebar-link reco-side-【补充】关于es6中类的注意事项" data-v-92abcef6>【补充】关于ES6中类的注意事项</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#注意" class="sidebar-link reco-side-注意" data-v-92abcef6>注意</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#理解" class="sidebar-link reco-side-理解" data-v-92abcef6>理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#理解-2" class="sidebar-link reco-side-理解-2" data-v-92abcef6>理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#作用" class="sidebar-link reco-side-作用" data-v-92abcef6>作用</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#使用指南" class="sidebar-link reco-side-使用指南" data-v-92abcef6>使用指南</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#内部读取某个属性值" class="sidebar-link reco-side-内部读取某个属性值" data-v-92abcef6>内部读取某个属性值</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#扩展属性-将对象的所有属性通过props传递-批量传递标签属性" class="sidebar-link reco-side-扩展属性-将对象的所有属性通过props传递-批量传递标签属性" data-v-92abcef6>扩展属性: 将对象的所有属性通过props传递（批量传递标签属性）</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#对props中的属性值进行类型限制和必要性限制" class="sidebar-link reco-side-对props中的属性值进行类型限制和必要性限制" data-v-92abcef6>对props中的属性值进行类型限制和必要性限制</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#默认属性值" class="sidebar-link reco-side-默认属性值" data-v-92abcef6>默认属性值</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#组件类的构造函数" class="sidebar-link reco-side-组件类的构造函数" data-v-92abcef6>组件类的构造函数</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#函数式组件使用props" class="sidebar-link reco-side-函数式组件使用props" data-v-92abcef6>函数式组件使用props</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#理解-3" class="sidebar-link reco-side-理解-3" data-v-92abcef6>理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#编码" class="sidebar-link reco-side-编码" data-v-92abcef6>编码</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#字符串形式的ref-新版本不推荐使用了" class="sidebar-link reco-side-字符串形式的ref-新版本不推荐使用了" data-v-92abcef6>字符串形式的ref（新版本不推荐使用了）</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#回调形式的ref" class="sidebar-link reco-side-回调形式的ref" data-v-92abcef6>回调形式的ref</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#createref创建ref容器" class="sidebar-link reco-side-createref创建ref容器" data-v-92abcef6>createRef创建ref容器</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#react中的事件处理" class="sidebar-link reco-side-react中的事件处理" data-v-92abcef6>React中的事件处理</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#理解-4" class="sidebar-link reco-side-理解-4" data-v-92abcef6>理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#非受控组件" class="sidebar-link reco-side-非受控组件" data-v-92abcef6>非受控组件</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#受控组件" class="sidebar-link reco-side-受控组件" data-v-92abcef6>受控组件</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#高阶函数" class="sidebar-link reco-side-高阶函数" data-v-92abcef6>高阶函数</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#函数的柯里化" class="sidebar-link reco-side-函数的柯里化" data-v-92abcef6>函数的柯里化</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#理解-5" class="sidebar-link reco-side-理解-5" data-v-92abcef6>理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#引入案例" class="sidebar-link reco-side-引入案例" data-v-92abcef6>引入案例</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#生命周期的三个阶段-旧" class="sidebar-link reco-side-生命周期的三个阶段-旧" data-v-92abcef6>生命周期的三个阶段（旧）</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#卸载组件" class="sidebar-link reco-side-卸载组件" data-v-92abcef6>卸载组件</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#生命周期的三个阶段-新" class="sidebar-link reco-side-生命周期的三个阶段-新" data-v-92abcef6>生命周期的三个阶段（新）</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#重要的勾子" class="sidebar-link reco-side-重要的勾子" data-v-92abcef6>重要的勾子</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#即将废弃的勾子" class="sidebar-link reco-side-即将废弃的勾子" data-v-92abcef6>即将废弃的勾子</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#基本原理图" class="sidebar-link reco-side-基本原理图" data-v-92abcef6>基本原理图</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#关于key的经典面试题" class="sidebar-link reco-side-关于key的经典面试题" data-v-92abcef6>关于key的经典面试题</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#spa的理解" class="sidebar-link reco-side-spa的理解" data-v-92abcef6>SPA的理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#路由的理解" class="sidebar-link reco-side-路由的理解" data-v-92abcef6>路由的理解</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#什么是路由" class="sidebar-link reco-side-什么是路由" data-v-92abcef6>什么是路由?</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#路由分类" class="sidebar-link reco-side-路由分类" data-v-92abcef6>路由分类</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#react-router-dom-的理解" class="sidebar-link reco-side-react-router-dom-的理解" data-v-92abcef6>react-router-dom 的理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#内置组件" class="sidebar-link reco-side-内置组件" data-v-92abcef6>内置组件</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#其它" class="sidebar-link reco-side-其它" data-v-92abcef6>其它</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#效果" class="sidebar-link reco-side-效果" data-v-92abcef6>效果</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#准备" class="sidebar-link reco-side-准备" data-v-92abcef6>准备</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#路由的基本使用" class="sidebar-link reco-side-路由的基本使用" data-v-92abcef6>路由的基本使用</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#实现" class="sidebar-link reco-side-实现" data-v-92abcef6>实现</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#index-js" class="sidebar-link reco-side-index-js" data-v-92abcef6>index.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#路由组件与一般组件的区别" class="sidebar-link reco-side-路由组件与一般组件的区别" data-v-92abcef6>路由组件与一般组件的区别</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#switch的使用" class="sidebar-link reco-side-switch的使用" data-v-92abcef6>Switch的使用</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#解决多级路径刷新页面样式丢失的问题" class="sidebar-link reco-side-解决多级路径刷新页面样式丢失的问题" data-v-92abcef6>解决多级路径刷新页面样式丢失的问题</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#路由的严格匹配与模糊匹配" class="sidebar-link reco-side-路由的严格匹配与模糊匹配" data-v-92abcef6>路由的严格匹配与模糊匹配</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redirect的使用-【重定向】" class="sidebar-link reco-side-redirect的使用-【重定向】" data-v-92abcef6>Redirect的使用 【重定向】</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#效果-2" class="sidebar-link reco-side-效果-2" data-v-92abcef6>效果</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#注意-2" class="sidebar-link reco-side-注意-2" data-v-92abcef6>注意</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#实现-2" class="sidebar-link reco-side-实现-2" data-v-92abcef6>实现</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#home-index-jsx" class="sidebar-link reco-side-home-index-jsx" data-v-92abcef6>Home/index.jsx</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#效果-3" class="sidebar-link reco-side-效果-3" data-v-92abcef6>效果</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#具体方法" class="sidebar-link reco-side-具体方法" data-v-92abcef6>具体方法</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#多种路由跳转方式" class="sidebar-link reco-side-多种路由跳转方式" data-v-92abcef6>多种路由跳转方式</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#browserrouter与hashrouter的区别" class="sidebar-link reco-side-browserrouter与hashrouter的区别" data-v-92abcef6>BrowserRouter与HashRouter的区别</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#相关文档" class="sidebar-link reco-side-相关文档" data-v-92abcef6>[]()[]() 相关文档</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux是什么" class="sidebar-link reco-side-redux是什么" data-v-92abcef6>redux是什么</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#什么情况下需要使用redux" class="sidebar-link reco-side-什么情况下需要使用redux" data-v-92abcef6>什么情况下需要使用redux</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux工作流程" class="sidebar-link reco-side-redux工作流程" data-v-92abcef6>redux工作流程</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#action" class="sidebar-link reco-side-action" data-v-92abcef6>action</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#reducer" class="sidebar-link reco-side-reducer" data-v-92abcef6>reducer</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#store" class="sidebar-link reco-side-store" data-v-92abcef6>store</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#实现-3" class="sidebar-link reco-side-实现-3" data-v-92abcef6>实现</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-store-js" class="sidebar-link reco-side-redux-store-js" data-v-92abcef6>[]()[]()redux/store.js</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-count-reducer-js" class="sidebar-link reco-side-redux-count-reducer-js" data-v-92abcef6>redux/count_reducer.js</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-count-action-js" class="sidebar-link reco-side-redux-count-action-js" data-v-92abcef6>redux/count_action.js</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-constant-js" class="sidebar-link reco-side-redux-constant-js" data-v-92abcef6>redux/constant.js</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#count-index-jsx" class="sidebar-link reco-side-count-index-jsx" data-v-92abcef6>Count/index.jsx</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#index-js-2" class="sidebar-link reco-side-index-js-2" data-v-92abcef6>index.js</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#store-js" class="sidebar-link reco-side-store-js" data-v-92abcef6>store.js：</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#理解-6" class="sidebar-link reco-side-理解-6" data-v-92abcef6>理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#使用异步中间件" class="sidebar-link reco-side-使用异步中间件" data-v-92abcef6>使用异步中间件</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#count-action-js" class="sidebar-link reco-side-count-action-js" data-v-92abcef6>count_action.js</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#store-js-2" class="sidebar-link reco-side-store-js-2" data-v-92abcef6>store.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#理解-7" class="sidebar-link reco-side-理解-7" data-v-92abcef6>理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#react-redux将所有组件分成两大类" class="sidebar-link reco-side-react-redux将所有组件分成两大类" data-v-92abcef6>react-redux将所有组件分成两大类</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#基本使用" class="sidebar-link reco-side-基本使用" data-v-92abcef6>基本使用</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#安装" class="sidebar-link reco-side-安装" data-v-92abcef6>安装</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#components-count-index-jsx" class="sidebar-link reco-side-components-count-index-jsx" data-v-92abcef6>components/Count/index.jsx</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#containers-count-index-jsx" class="sidebar-link reco-side-containers-count-index-jsx" data-v-92abcef6>containers/Count/index.jsx</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#app-jsx" class="sidebar-link reco-side-app-jsx" data-v-92abcef6>App.jsx</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#优化" class="sidebar-link reco-side-优化" data-v-92abcef6>优化</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#优化1-简写mapdispatchtoprops" class="sidebar-link reco-side-优化1-简写mapdispatchtoprops" data-v-92abcef6>优化1 简写mapDispatchToProps</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#优化3-整合ui组件和容器组件" class="sidebar-link reco-side-优化3-整合ui组件和容器组件" data-v-92abcef6>优化3 整合UI组件和容器组件</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#store-js-3" class="sidebar-link reco-side-store-js-3" data-v-92abcef6>store.js</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#纯函数" class="sidebar-link reco-side-纯函数" data-v-92abcef6>纯函数</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#containers-count-index-jsx-3" class="sidebar-link reco-side-containers-count-index-jsx-3" data-v-92abcef6>containers/Count/index.jsx</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#containers-person-index-jsx" class="sidebar-link reco-side-containers-person-index-jsx" data-v-92abcef6>containers/Person/index.jsx</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-actions-count-js" class="sidebar-link reco-side-redux-actions-count-js" data-v-92abcef6>redux/actions/count.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-action-person-js" class="sidebar-link reco-side-redux-action-person-js" data-v-92abcef6>redux/action/person.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-reducers-count-js" class="sidebar-link reco-side-redux-reducers-count-js" data-v-92abcef6>redux/reducers/count.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-reducers-person-js" class="sidebar-link reco-side-redux-reducers-person-js" data-v-92abcef6>redux/reducers/person.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-reducers-index-js" class="sidebar-link reco-side-redux-reducers-index-js" data-v-92abcef6>redux/reducers/index.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-constant-js-2" class="sidebar-link reco-side-redux-constant-js-2" data-v-92abcef6>redux/constant.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#redux-store-js-2" class="sidebar-link reco-side-redux-store-js-2" data-v-92abcef6>redux/store.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#app-jsx-2" class="sidebar-link reco-side-app-jsx-2" data-v-92abcef6>App.jsx</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#index-js-4" class="sidebar-link reco-side-index-js-4" data-v-92abcef6>index.js</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#setstate" class="sidebar-link reco-side-setstate" data-v-92abcef6>setState</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#对象式" class="sidebar-link reco-side-对象式" data-v-92abcef6>对象式</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#函数式" class="sidebar-link reco-side-函数式" data-v-92abcef6>函数式</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#fragment" class="sidebar-link reco-side-fragment" data-v-92abcef6>Fragment</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#使用-2" class="sidebar-link reco-side-使用-2" data-v-92abcef6>使用</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#context" class="sidebar-link reco-side-context" data-v-92abcef6>Context</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#component的问题" class="sidebar-link reco-side-component的问题" data-v-92abcef6>Component的问题</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#效率高的做法" class="sidebar-link reco-side-效率高的做法" data-v-92abcef6>效率高的做法</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#原因" class="sidebar-link reco-side-原因" data-v-92abcef6>原因</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#解决" class="sidebar-link reco-side-解决" data-v-92abcef6>解决</a></li><li class="level-3" data-v-92abcef6><a href="/blog/blogs/react/0301.html#办法1-重写shouldcomponentupdate-方法" class="sidebar-link reco-side-办法1-重写shouldcomponentupdate-方法" data-v-92abcef6>]()[`方法</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#如何向组件内部动态传入带内容的结构-标签" class="sidebar-link reco-side-如何向组件内部动态传入带内容的结构-标签" data-v-92abcef6>如何向组件内部动态传入带内容的结构(标签)?</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#children-props" class="sidebar-link reco-side-children-props" data-v-92abcef6>children props</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#render-props-2" class="sidebar-link reco-side-render-props-2" data-v-92abcef6>render props</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#使用-3" class="sidebar-link reco-side-使用-3" data-v-92abcef6>使用</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#理解-8" class="sidebar-link reco-side-理解-8" data-v-92abcef6>理解</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#特点" class="sidebar-link reco-side-特点" data-v-92abcef6>特点</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#使用方式" class="sidebar-link reco-side-使用方式" data-v-92abcef6>使用方式</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#示例-3" class="sidebar-link reco-side-示例-3" data-v-92abcef6>示例</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#组件间的关系" class="sidebar-link reco-side-组件间的关系" data-v-92abcef6>组件间的关系</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#几种通信方式" class="sidebar-link reco-side-几种通信方式" data-v-92abcef6>几种通信方式</a></li><li class="level-2" data-v-92abcef6><a href="/blog/blogs/react/0301.html#比较好的搭配方式" class="sidebar-link reco-side-比较好的搭配方式" data-v-92abcef6>比较好的搭配方式</a></li></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-a008c6ba data-v-a008c6ba><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-a008c6ba><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-a008c6ba></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-a008c6ba></path></svg></div></div></div>
    <script src="/blog/assets/js/app.bd1ef45e.js" defer></script><script src="/blog/assets/js/3.ba154db2.js" defer></script><script src="/blog/assets/js/1.1f0d1f23.js" defer></script><script src="/blog/assets/js/10.707cbfdf.js" defer></script>
  </body>
</html>
